Vue双向绑定的实现原理 Object.defineProperty

文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

descriptor 有这些取值，首先你只需要记住get 和set，其他全部忘掉

tip2.1.png

原理

tip2.2.png

const demoDefineProperty = () => {
    let o = {
        name: 'two_k'
    }
    
    Object.defineProperty(o, 'name', {
        get: function() {
            console.log('get get')
        },
        set: function() {
            console.log('set set')
        }
    })
    
    console.log('o is', o.name)
    o.name = 'new_k'
    console.log('new o is', o.name)
}

比如定义了 Object.defineProperty(o, 'name', {}) ，那么当你访问o.name 的时候，会自动调用get 方法; 当赋值 o.name = xxx 的时候，会自动调用set 方法。
相当于 js 这门语言给你提供了一个后门，你调用o.name 会在背后做一些事情。

所谓数据双向绑定，就是 js 对象的数据变了，页面元素的值会发生变化。这就是数据双向绑定的原理