vue 2.x 响应式

Object.defineProperty

基本用法

// Object.defineProperty 的基本用法
const data = {}
const name = 'zhangsan'
Object.defineProperty(data, "name", {
    get: function () {
        console.log('get')
        return name  
    },
    set: function (newVal) {
        console.log('set')
        name = newVal
    }
});

// 测试
console.log(data.name)  // get zhangsan
data.name = 'lisi'      // set

演示

监听数据变化，参考 code-1.js

缺点

总结 Object.defineProperty 缺点：

• 深度监听，需要递归到底
• 无法监听新增属性/删除属性（Vue.set Vue.delete）
• 无法监听数组，需要特殊处理

3.0 的响应式就解决了这些问题，后面会讲。