网站开发人员薪酬,成都建设网站首页,优秀包装设计作品及解析,过期网站查询♥ vue中$set用法详细讲解
1、认识
在vue中#xff0c;并不是任何时候数据都是双向绑定的。
官方文档介绍 使用场景
当数据没有被双向绑定的时候#xff0c;我们就需要使用set了
举个例子#xff1a; vue的data里边声明或者已经赋值过的对象或者数组#xff08;数组里…♥ vue中$set用法详细讲解
1、认识
在vue中并不是任何时候数据都是双向绑定的。
官方文档介绍 使用场景
当数据没有被双向绑定的时候我们就需要使用set了
举个例子 vue的data里边声明或者已经赋值过的对象或者数组数组里边的值是对象时向对象中添加新的属性如果更新此属性的值是不会更新视图的。
2、$set用法
数据没有被双向绑定我们可以使用 vm.$set 实例方法该方法是全局方法 Vue.set 的一个别名
- this.$set(原数组, 索引值, 需要赋的值)
length的问题还需要用splice方法 - vm.items.splice(newLength)set为解决双向绑定失效所以什么时候双向绑定失效就用它 当你利用索引直接设置一个数组项时例如vm.items[indexOfItem] newValue 当你修改数组的长度时例如vm.items.length newLength 由于 JavaScript 的限制Vue不能检测对象属性的添加或删除 var vm new Vue({data: {a: 1}
})
// vm.a 现在是响应式的vm.b 2
// vm.b 不是响应式的
vm.a是响应式的 vm.b不是响应式的
简单来说
对象中原来有这个key 双向绑定 对象中原来没有这个key新增的key不是双向绑定 vm.$set(con.userProfile, age, 27)
进一步使用
如果我们添加的属性很多条可能就需要写一个循环来多次set 你也可能使用Object.assign这里有一些需要注意的地方。 如果你想添加新的响应式属性下面这样写是不行的。
Object.assign(vm.userProfile, {age: 27,favoriteColor: Vue Green
})
这样才是正确的
vm.userProfile Object.assign({}, vm.userProfile, {age: 27,favoriteColor: Vue Green
})
3、原理
———————————————————————————— 由于 Vue 会在初始化实例时进行双向数据绑定使用Object.defineProperty()对属性遍历添加 getter/setter 方法所以属性必须在 data 对象上存在时才能进行上述过程 这样才能让它是响应的。如果要给对象添加新的属性此时新属性没有进行过上述过程不是响应式的所以会出想数据变化页面不变的情况。此时需要用到$set。 向响应式对象中添加一个 property并确保这个新 property 同样是响应式的且触发视图更新。它必须用于向响应式对象上添加新 property因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty ‘hi’) ————————————————————————————
