Vue原文链接：cn.vuejs.org/v2/guide/re…

如何追踪变化

getter和setter

get语法将对象属性绑定到查询该属性时将被调用的函数。 set语法将对象属性绑定到要调用的函数。

//语法

{get prop() { ... } } //
{set prop(value) { . . . }} //prop:自定义的函数的属性名，value:参数

get类似于vue中的computed计算属性，给与我们的属性一个计算出的新属性（伪属性），和set配和使用，get计算，set赋值修改。

const obj = {
    name:'wang',
    age:'18',
    get newName(){
      return  this.name + this.age
    },
    set newName(value){
      return this.name = value
    }
}
// expect output wang18
console.log(obj.newName)
// expect output fran18
console.log(obj.newName='frank')

Objec.defindpropetry()

给一个实例添加一个属性。和get、set不同的是不用声明在实例中，而在调用Object的defindpropetry函数来执行

语法：

//obj：要添加属性对象名，prop：要函数的属性名，descriptor：要定义或修改的属性描述符。
Object.defineProperty(obj, prop, descriptor) 

几个常用默认属性：

• configurable：默认为false，表示属性不能被删除，
• enumerable：默认为false，表示属性不会显示在对象中，
• writable：默认为falise，表示属性中的数据不可被修改，

proxy代理

给一个实例添加代理，当实例变化是，会调用另一个函数来执行

语法：

new Proxy(target,handler) 
// target:要添加代理的名称（可以是对象，数组，甚至可以是另一个代理），
// handler：一个通常以函数作为属性的对象，

tconst handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};
}
const p = new Proxy({},handler)
p.a = 1
p.b = undefined
//expect output Proxy{a:1,b:undefined},被proxy包装的一个对象
console.log(p)
//1.undefined
console.log(p.a,p.b)
//false,37
console.log('c'in p ,p.c)

Vue数据响应

vue会给我们data包装以下（加监听和代理），当我们更改data的内容时，会自动更新，

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter

我们需要把数据写在data里，vue才会对存在的propetry遍历一遍添加getter和setter，对于不存在的vue并不会包装

const vm = new Vue{
    data:{
        a:1
    }
}
// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

也可以通过set添加进去 ， Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

1：调用vm自身set
this.$set((this.someObject,'b',2))
2:调用全局set
Vue.set(vm.someObject, 'b', 2)