![44fa440d9a632d1d22019b19b16f08ae.png](https://i-blog.csdnimg.cn/blog_migrate/08cb4e6564a261eaac4b0ff2851eddfd.jpeg)
场景
一般想到这个api的开发者,都是遇到明明更改了数据,然而浏览器的dom却没有更新新的数据,有时候会出现操作一下其他数据,之前更新的数据才渲染到dom,有时候不管怎么操作都不会更新,这种类似的bug一直让很多开发者苦恼。
Vue.set
首先让我们看看尤大的文档。
每个组件都是继承了vue的原型,所以组件实例化后会在this上挂载一个$set方法,和Vue.set是一样的。
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
文档写的很明白,向响应式对象中添加一个响应式属性,那么出现无法更新视图(dom)的情况,不就是说明视图所绑定的属性值并不是响应式么。
案例
例一:
如上代码,当一个组件中有多个input标签,并且v-model绑定多个值时,且这些值都是某一个对象中动态出现的属性,这种情况下,如果单纯的赋值,
// 错误赋值export default { methods: { fn() { getData().then(res => { this.obj[res.key] = res.value; }) } }}
这种情况下,你会在devtools中看到,数据的确赋值成功了,然而input无法更新视图,并且可能你无法在这个input内输入任何内容了,这时this.obj里面的键都不是响应式的,那么this.$set方法该出场了。
// 正确姿势export default { methods: { fn() { getData().then(res => { // this.obj[res.key] = res.value; this.$set(this.obj, res.key, res.val); }) } }}
此时你会发现,视图更新了,一切都美好了,吃的饭也更香了。
例二:
有人说了,只用this.$set不就行了,Vue.set有啥用
此时obj是一个vuex的状态,这个obj可能是其他组件或者页面的,此时Vue.set就出场了。
// 某个mutationimport Vue from 'vue';export default { updateObj(state, { key, value }) { // state.obj[key] = value; 这是错误的赋值 Vue.set(state.obj, key, value); }}
欢迎关注公众号:前端冒险指南