vue学习（58）响应原理

知识点

1. vue2.x
   • 实现原理：
     • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
     • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

• 存在问题：
  • 新增属性、删除属性, 界面不会更新。
    备注：可以通过$set和$delete解决
  • 直接通过下标修改数组, 界面不会自动更新。
    备注：可以通过$set或者splice替换的方法解决

2. vue3.x
   proxy:是ES6一个新增特性。Proxy有两个参数一个是原始的对象 一个是用来定制拦截的行为(捕获器)。
   • 实现原理
     • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性
       值的读写、属性的添加、属性的删除等。
     • 通过Reflect（反射）: 对源对象的属性进行操作。

new Proxy(data, {
    // 拦截读取属性值
    get (target, prop) {
        return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
        return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'   

为什么要使用Reflect而不直接使用target[prop],Reflect会有一个返回值true或false，如果成功返回true,失败返回false,这样在底层编写代码的时候减少try,catch的使用。