vue2 $set 方法 与 = 号 为对象添加新值不起作用得原因

是否有很多小伙伴在在学习vue2得时候会遇到 data里新建了一个对象 obj ，而且需要动态得向obj里添加新的值，然而当你才思泉涌 想要直接用 this.obj.[新的属性] = [新的属性值] 的时候 你会发现一切都是徒劳，页面并没有变化，那么这究竟是为什么那？

那么接下来 小call 就带你深度了解一下vue 双向绑定的原理。

在了解双向绑定的原理与$set 方法之前，我们要先来了解一个方法

Object.defineProperty

相信有很多学习前端的小伙伴在学习js的时候 见过或者学习过这个方法。那么他是用来干什么的那？话不多说直接上代码

 let obj = {
            student: '学生'
        }
        Object.defineProperty(obj, 'teacher', {
            writable:true, //当且仅当该属性的 writable 键值为 true 时，属性的值，也就是下面的 value，
                           //才能被赋值运算符改变。
            configurable: true, // 配置项是否可以修改,就是说writable和enumerable是否能够修改
            enumerable: true, // 是否可以枚举,就是说在遍历的时候能不能遍历出来
            value: '老师',
        })
        console.log(obj);

最后控制台输出是这个样子滴

没错 这个方法就是为对象添加属性的，但是相信有很多小伙伴又该说了明明直接  this.obj.[新的属性] = [新的属性值] 就能解决的事，那为什么还要用这么麻烦的方法那。而小call想说的是，任何事或物既然存在了，一定有他存在的道理。通过上面的代码你会看见 这个方法一共有三个参数

1、要修改的对象

2、要添加的属性

3、对要添加的属性的一些限制，以及添加的属性值

前面两个相信小伙伴看完了一定会知道他是干什么用的，我说一说第三个参数里的writable属性

当他为true时 value属性的值，才能被赋值运算符改变。也就是说是用来限制这个属性可改与不可改的，在深度理解就是 这个属性它具备了get和set方法

那么说到这个我们就来聊聊 vue 里data中的属性的创建，有没有想过 为什么data中的属性可以用this.属性 = 属性值 这个方式来进行修改？哈哈。懵了吧，直接上图

 let vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    name: '我是vue',
                    age: 18,
                }
            },
        })

声明了一个obj 里面 有name 和 age 两个属性 我们在控制台看看这两个属性有什么特点

你会发现这两个属性都有 get 和 set 方法 ，

那我们再来为obj 动态的添加一个新的属性 sex = ‘'男'

用this.obj.sex = '男' 的方式添加

 你会发现 控制台显示添加成功了 而 页面没有动态的显示这个属性 这是为什么那？然我们来看看obj中的属性

 你会发现的确添加成功了  但是有个问题，我们看红色箭头的地方  他少了sex的get 和 set 方法相

信有很多小伙伴 恍然大悟 已经知道了 为什么用 等号赋值的方式  不能动态的更新页面了吧那 有小

伙伴又要问了  那为什么 原本有的属性 就有set和get方法 而后添加的就没有那，这就要用到我们之

前讲的 Object.defineProperty方法了 其实 vue中的已经声明了属性， 会通过遍历 这些属性，然后

将这些属性 放到 Object.defineProperty  方法的第二参数上 ,对他们重新的赋值，使他们具有set和

get方法 ，之所以用等号的方式添加的新的属性 为什么不能动态的显示 ，是因为

Object.defineProperty这个方法的第二个参数找不到你新添加的那个属性 所以就不具备set和get方

法了。为了解决这个问题，这时候就需要$set这个方法出场了 他也有三个参数

1、需要修改的对象

2、需要修改或添加的属性

3、修改或添加的值

上图

 

这时我们看 他就具有了 set 和 get 方法 页面上也有了sex属性！！！！