vue 中使用 this 更新数据的一次问题记录
情景说明：
之前用 vue 做数据绑定更新时，发现一个莫名奇妙的问题。
我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，更新步骤后面紧跟着打印了 console.log(this.books)，打印数据显示确实更新成功！但页面数据渲染无论是 {{books.length}} 还是 {{books}} 都显示没有数据！！！
这就脑瓜子疼了，花了老长时间反复证明了：this.books 数据肯定更新上去了，但它喵的 {{books}} 就是不显示！
敲重点：我是在 axios 的回调函数中使用的 this 更新数据！
最后想起了一个小细节，axios 异步通信的回调函数我用的是函数表达式 axios({xxx}).then(function(res){xxx})，格式示例如下：
axios({
url: url,
method: "get",
headers: {
token: token
}, //自定义请求头数据传递token
params: {
userId: userId
}
}).then(function(res) {
//上面的回调函数用的标准格式
}
}); 使用这种格式的回调函数写法，如果在回调函数中，使用 this，那么，这个 this 就不是 vm(ViewModel) 对象了，而是回调函数自身这个对象！！！
所以，使用这种回调函数写法，在回调函数中，就不能使用类似 this.books 进行数据更新！只能使用 vm.books（vm 指的是创建 vue 实例对象时的引用或对象属性名称）来进行对 vue 对象数据的更新。
如果想使用 this 来实现数据更新，那就必须使用回调函数的简写格式：axios({xxx}).then((res)=>{xxx})，格式示例如下：
axios({
url: url,
method: "get",
headers: {
token: token
}, //自定义请求头数据传递token
params: {
userId: userId
}
}).then((res)=>{
//上面的回调函数用的简写格式
}
}); 使用这种简写格式的回调函数写法，就可以直接在回调函数中使用 this，此时，这个 this 也是 vm(ViewModel) 对象！！！
PS：好吧，这细节也是没谁了，也怪我自己突然没注意到，使用了标准格式的回调函数写法~
但是，话说 ，为什么它喵的，使用标准格式写法，this 指的不是 vue 实例对象，但是用它更新的数据如 this.books 也给更新上去了，打印出来也真的是一点毛病没有？？？
到此这篇关于vue 中使用 this 更新数据的一次大坑的文章就介绍到这了,更多相关vue 使用 this 更新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue中如何使用video.js实现截图和视频录制与下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue日志之如何select选中默认值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家详细介绍了Vue-cli框架实现计时器应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue与electron实现进程间的通信详情，本文主要介绍electron渲染进程和主进程间的通信，以及在渲染进程和主进程中常用的配置项，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。2016-10-10
最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。2016-09-09
vue路由的URL有两种模式,一种是 hash,一种是history,下面这篇文章主要给大家介绍了关于vue history模式刷新404原因及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论