vue2 原理

获取和设置

/**
Object.defineProperty(obj, prop, descriptor)
参数1:obj: 要在其上定义属性的对象。
参数2:prop: 要定义或修改的属性的名称。
参数3:descriptor: 将被定义或修改的属性的描述符(包含数据描述符和存取描述符)。
**/
//数据描述符
let obj1 = {};
Object.defineProperty(obj1, "key", {
  //该属性对应的值，默认为 undefined。
  value: 1,
  //属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。
  writable: true,
  //属性的 enumerable 为 true 时，
  //该属性才能够出现在对象的枚举属性中。默认为 false。
  enumerable: true,
  //属性的configurable 为 true 时，
  //该属性描述符才能够被改变，也能够被删除。默认为 false。
  configurable: true,
});

console.log(obj1);

// 存取描述符
let obj2 = {};
let value;
Object.defineProperty(obj2, "key", {
  // 数据描述符.....
  get: function () {
    console.log("执行了获取操作");

    return value;
  },
  set: function (newValue) {
    console.log("执行了设置操作");

    value = newValue + "真帅！！！！";
  },
});
//执行get
console.log(obj2.key);
//执行set
obj2.key = "铁蛋儿";

监听数据

// 监听的数据
let obj = {
    name: '铁蛋儿',
    age: 1,
    arr: ['张三', '李四', '王五'],
    job: {
        code: 'FE'
    }
}

// 封装监听数据变化的函数
function defineProperty(obj, key, val) {
    observer(val)
    Object.defineProperty(obj, key, {
        get() {
            // 读取方法
            console.log('读取', key, '成功')
            return val
        },
        set(newval) {
            // 赋值监听方法
            if (newval === val) return
            // 遍历监听数据的每一项 
            observer(newval)
            console.log('监听赋值成功', newval)
            val = newval
            // 可以执行渲染操作
        }
    })
}

function observer(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    for (const key in obj) {
        // 给对象中的每一项都设置响应式
        defineProperty(obj, key, obj[key])
    }
}

observer(obj)


// obj.name = '小白龙'

// obj.job.code = 'server'

// obj.name = {
//     sname: '欧巴'
// }
// obj.name.sname = '欧巴铁蛋儿'

obj.arr[3] = 1
// obj.arr.push([1,[2,[3]]])

数组

// Object.defineProperty 是对象的方法监听不到数组的变更的 Vue2.x的做法是重写数组的7个方法
// 封装监听数据变化的函数
let obj = {
    name: '铁蛋儿',
    age: 1,
    arr: ['张三', '李四', '王五'],
    job: {
        code: 'FE'
    }
}
const arrayMethods = Array.prototype;
// 先克隆一份Array的原型出来
const arrayProto = Object.create(arrayMethods);
const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
methodsToPatch.forEach(method => {
    arrayProto[method] = function () {
        // 执行原始操作
        arrayMethods[method].apply(this, arguments)
        console.log('监听赋值成功', method)
    }
})

function defineProperty(obj, key, val) {
    observer(val)
    Object.defineProperty(obj, key, {
        get() {
            // 读取方法
            console.log('读取', key, '成功')
            return val
        },
        set(newval) {
            // 赋值监听方法
            if (newval === val) return
            // 遍历监听数据的每一项 
            observer(newval)
            console.log('监听赋值成功', newval)
            val = newval
            // 可以执行渲染操作
        }
    })
}

function observer(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    if (Array.isArray(obj)) {
        // 如果是数组, 重写原型
        obj.__proto__ = arrayProto
        // 传入的数据可能是多维度的,也需要执行响应式
        for (let i = 0; i < obj.length; i++) {
            observer(obj[i])
        }
    } else {
        for (const key in obj) {
            // 给对象中的每一个方法都设置响应式
            defineProperty(obj, key, obj[key])
        }
    }
}

observer(obj)

obj.arr.push(4)