vue.js双向绑定的原理

一、访问器属性

访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。

var obj = {}

Object.defineProperty(obj, 'sname', {
    get: function () {
        console.log('get方法被调用了', this)
    },
    set: function (val) {
        console.log('set方法被调用了', val, this)
    }
})

obj.sname  // get方法被调用了 {}  underfined
obj.sname = 1 // set方法被调用了 2 {}  1

obj.sname可以像普通属性一样读取访问器属性

访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。

obj.sname 读取属性，就是调用get函数并返回get函数的返回值

obj.sname = 1 为属性赋值，就是调用set函数传参

get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。