Vue.set()方法的使用

原创已于 2022-05-30 20:32:10 修改 · 2.3w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2020-10-11 15:45:42 首次发布

vue2 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了Vue的响应式原理及其限制，并解释了如何使用Vue.set()方法来实现对对象属性的动态添加，使这些属性也能响应式更新。

在介绍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>