在介绍Vue.set()方法之前,我们先了解一下vue响应式的原理。
一、vue如何追踪变化
当你把一个普通的JS对象传给vue实例的data选项时,vue将遍历此对象的所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty是ES5中一个无法shim的特性,这也就是为什么vue不支持IE8以及更低版本的浏览器。
二、为什么使用Vue.set()
因为受现代JS的限制,vue不能检测到对象属性的添加或删除。
由于vue会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。
vue不允许在已经创建的实例上动态添加新的根级响应式属性,不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。
三、使用方法
Vue.set(object, key, value)
举个例子:
<div id="app">
<p>msg===>{{msg}}</p>
<p>sex===>{{json.sex }}</p>
<div/>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
json:{
username:"张三",
age:20
},
msg:"hello"
}
})
//vm.json.username = "李四" 修改属性可以
//如果对之前存在的属性username,age进行更改是可以的,因为内部通过Object.defineProperty实现了数据双向绑定,但是对与后续新增添的属性例如sex,那么视图是没有办法渲染的
// vm.json["sex"]="男" //发现页面不会渲染sex这个属性
Vue.set(vm.json, "sex", "女")
</script>