带你彻底搞懂Vue响应式原理！

在谈vue响应式原理之前,需要先了解一下Es5的Object的一个属性defineProperty

Vue通过Object.defineProperty的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据;
Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让Vue转换它,这样才能让它是响应的。

defineProperty其实并不是核心的为一个对象做数据绑定,而是去给对象做属性标签,只不过属性里的get/set实现了响应式

作用:

设置对象属性的值，或者修改对象属性的值，并且返回该对象

语法:

Object.defineProperty(obj, prop, descriptor)

参数说明:

• obj:对象的名称
• prop:要设置的属性名
• descriptor:将被定义或被修改的属性描述符,该参数是一个对象,该对象常见设置是个属性值

1. value：属性对应的值
2. writeable：该属性是否可写， 如果设置成 false，则任何对该属性改写的操作都无效（但不会报错），默认为 false。
3. configurable：如果为 false，则任何尝试删除目标属性或修改属性以下特性（writable, configurable, enumerable）的行为将被无效化，默认为 false
4. enumerable：是否能在for...in循环中遍历出来或在Object.keys中列举出来。默认为 false
5: get:在读取属性时调用的函数,默认值undefined
6: set:在写入时调用的函数,默认值undefined

代码实践:

var obj = {
    a:1,
    b:2
}
Object.defineProperty(obj,'a',{
    writable:false
})
console.log(Object.getOwnPropertyDescriptor(obj,"a"));