我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去;

　　当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。例如这个代码：

<div id="app">
    姓名：{{ name }}<br>
    年龄：{{age}}<br>
    性别：{{sex}}<br>
    说明：{{info.content}}
</div>
<script>
    var data = {
        name: "张三",
        age: '3',
        info: {
            content: 'my name is test'
        }
    }    
    var vm = new Vue({
        el:'#app',
        data: data
    });
    data.sex = '男'；
</script>

 　　运行结果：

姓名：张三
年龄：3
性别：
说明：my name is test

 　　为什么会这样呢?当去查对应文档时，你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：

　　在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图;

　　解决方法：

new Vue({
    el:'#app',
    data: data,
    created: function(){
        Vue.set(data,'sex', '男'); // 等同于this.$set(data,'sex','男')
    }
});

 　　总结：

　　由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出现数据变化，页面不变的情况。此时需要用到$set。

　　语法： this.$set(Object, key, value)

上一篇

虚拟DOM实现原理是什么？

下一篇

react的虚拟dom怎么实现？