vue 中使用 this 更新数据的一次大坑 _

本文主要是介绍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,更新数据,数据,数组,步骤,函数 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于vue 中使用 this 更新数据的一次大坑 _的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！