一次性彻底理解vue2-vue3响应式原理

监听对象的操作

技术都是服务于需求的,所以我们先来看一个需求.假设在开发过程中有一个对象,我们希望监听这个对象中的属性被设置或获取的过程. 那vue2中是怎么做到这一点的呢?

    let obj = { name: 'luo', age: 18 }
    for (const key in obj) {
      let value = obj[key]
      Object.defineProperty(obj, key, {
        configurable:true,
        enumerable:true,
        get(){
          console.log('监听到get',value);
          return value
        },
        set(newValue){
          console.log('监听到set',newValue);
          value = newValue
        }
      })
    }
    obj.name = 'haha'
    console.log(obj.name)

vue2中就是利用了Object.defineProperty的存储属性描述符来对属性的操作进行监听.但是这样做有什么缺点呢?

1. 首先Object.defineProperty的设计初衷,不是为了去监听拦截一个对象中所有的属性的;我们在定义某些属性的时候,初衷其实是定义普通的属性,但是后面我们强行将它变成了存取属性描述符.
2. 如果我们想要监听更加丰富的操作,比如新增属性,删除属性,那么Object.defineProperty是无能为力的.

Proxy基本使用

为了解决上述问题,我们可以使用ES6中新增的一个Proxy类,它用来帮助我们创建一个代理.

• 也就是说,如果我们希望监听一个对象的相关操作,那么我们可以先创建一个代理对象
• 之后对该对象的所有操作,都可以通过代理对象来完成,代理对象可以监听我们想要对原对象进行哪些操作 我们直接将上面的案例用Proxy来实现一次.
• 首先我们需要new Proxy对象,并且传入需要监听的对象以及一个处理对象,可以称之为handler;
  const p = new Proxy(target, handler)
• 我们之后的操作都是直接对Proxy的操作,而不是原有对象,因为我们需要在handler里面进行监听;

    let obj = { name: 'luo', age: 18 }
    let p = new Proxy(obj, {
      deleteProperty(target,key){
          console.log('delete操作')
          return delete target[key]
      },
      get(target, key){
        console.log('get操作')
        return target[key]
      },
      set(target, key, value){
        if(key in target){
          //修改
          console.log('set修改操作')
        }else{
          //新增
          console.log('set新增操作')
        }
        
        target[key] = value
      }
    })
    p.name = 'haha'
    p.sex = 'man'
    delete p.age
    console.log(p.name)

Proxy的所有捕获器

总共有13个捕获器，分别是

1. handler.getPrototypeOf()

• Object.getPrototypeOf()方法的捕获器

2. handler.setPrototypeOf()

• Object.setPrototypeOf()方法的捕获器

3. handler.isExtensible()

• Object.isExtensible方法的捕获器

4. handler.preventExtensions()

• Object.preventExtensions方法的捕获器

5. handler.getOwnPropertyDescriptor()

• Ojbect.getOwnPropertyDescriptor方法的捕获器

6. handler.defineProperty()

• Object.defineProperty()方法的捕获器

7. handler.ownKeys()

• Object.getOwnPropertyNames
• Object.getOwnPropertySymbols

8. handler.has()

• in操作符的捕获器

9. handler.get()

• 属性读取操作的捕获器

10. handler.set()

• 属性设置操作的捕获器.

11. handler.deleteProperty()

• delete操作符的捕获器

12. handler.apply()

• 函数调用操作的捕获器 ps:apply,call都可以捕获到

13. handler.construct()

• new操作符的捕获器

Reflect的作用

Reflect是ES6中新增的一个API,他是一个对象. Reflect主要是提供了很多操作JS对象的方法,有点像Object中操作对象的方法;

如果我们有Object可以做这些操作,那么为什么还需要有Reflect呢

• 这是因为早期的ECMA规范中没有考虑到这种对对象本身的操作如何设计会更加规范,所以将这些API都放到了Object上面,但是Object作为一个构造函数,这些操作时机上放到它身上并不合适;
• 另外还包含一些类似于in、delete操作符,让JS看起来是会有一些奇怪,所以ES6中新增了Reflect,让我们这些操作都集中到了Reflect对象上; Object和Reflect对象之间的API关系，可以参考MDN文档

Reflect的常见方法

Reflect中常见的方法是和Proxy一一对应的,也是13个

1. Reflect.getPrototypeOf(target)

• Object.getPrototypeOf()

2. Reflect.setPrototypeOf(target,protytype) 设置对象原型,并返回一个Boolean

• Object.set PrototypeOf()

3. Reflect.isExtensible(target)

• 类似于Object.isExtensible()

4. Reflect.preventExtensions(target)

• 类似于Object.preventExtensions()

5. Reflect.getOwnPropertyDescriptor(target,propertyKey)

• Object.getOwnPropertyDescriptor() 6.Reflect.defineProperty(target,propertyKey,attributes)
• Object.defineProperty()

7. Reflect.ownKeys(target)

• 返回一个包含所有自身属性(不包含继承属性)的数组.(类似于Object.keys(),但不会受enumberable影响)

8. Reflect.has(target,propertyKey)

• 判断一个对象是否存在某个属性,和in运算符的功能完全相同

9. Reflect.get(target, propertyKey[,receiver])

• 获取对象身上某个属性的值,类似于target[name]

10. Reflect.set(target,propertyKey,value[,receiver])

• 将值分配给属性的函数,返回一个Boolean,如果更新成功,则返回true.

11. Reflect.deleteProperty(target, propertyKey)

• 类似于delete target[name]

12. Reflect.apply(target,thisArgument,argumentsList)

• 类似于Function.protytype.apply()

13. Reflect.construct(target,argumentsList[,new Target])

• 类似于new target(...args)

Reflect的使用

我们之前Proxy案例中虽然解决了Object.defineProperty的问题,但还是操作了原对象.现在我们都可以修改为Reflect来操作

    let obj = { name: 'luo', age: 18 }
    let p = new Proxy(obj, {
      deleteProperty(target,key){
          console.log('delete操作')
          return Reflect.deleteProperty(target, key)
      },
      get(target, key){
        console.log('get操作')
        return Reflect.get(target, key)
      },
      set(target, key, value){
        if(key in target){
          //修改
          console.log('set修改操作')
        }else{
          //新增
          console.log('set新增操作')
        }
        return Reflect.set(target, key, value)
      }
    })
    p.name = 'haha'
    p.sex = 'man'
    delete p.age
    console.log(p.name)

Receiver的作用

我们发现在使用getter、setter的时候有一个receiver的参数,它的作用是什么?

• 如果我们的原对象有setter,getter的访问器属性,那么可以通过receiver来改变里面的this;

    let obj = { name: 'luo', age: 18 }
    let p = new Proxy(obj, {
      deleteProperty(target,key){
          console.log('delete操作')
          return Reflect.deleteProperty(target, key)
      },
      get(target, key, receiver){
        console.log('get操作')
        return Reflect.get(target, key, receiver)
      },
      set(target, key, value, receiver){
        if(key in target){
          //修改
          console.log('set修改操作')
        }else{
          //新增
          console.log('set新增操作')
        }
        return Reflect.set(target, key, value, receiver)
      }
    })
    p.name = 'haha'
    p.sex = 'man'
    delete p.age
    console.log(p.name)

Reflect的construct

function Student(name , age){
    this.name = name
    this.age = age
}
function Teacher(){}

const s = Reflect.construct(Student,["luo", 18], Teacher)
console.log(s.__proto__ === Teacher.prototype) //true

什么是响应式?

简单来说就是就是有一个变量被其他代码块所应用,那么一旦这个变量改变之后 引用其的代码块都自动重新执行

那么问题来了,当变量发生变化时,怎么自动取执行某一个函数(代码块)呢?在开发中我们时有很多函数的,我们如何区分一个函数需要响应式,还是不需要响应式呢?

区分响应式函数 watchFn

我们可以封装一个新函数watchFn,凡是传入到watchFn的函数,就是需要响应式的,其他函数默认不需要响应式的

const reactiveFns = []
function watchFn(fn){
    reactiveFns.push(fn)
    fn()
}

响应式依赖的收集

目前我们收集的依赖是放到一个数组中来保存的,但是这里会存在数据管理的问题.

• 我们在开发中需要监听很多对象的响应式;
• 这些对象需要监听的不只是一个属性,它们很多属性的变化,都会有对应的响应式函数;
• 我们不可能在全局维护一大堆数据来保存这些响应函数; 所以我们要设计一个类,这个类用于管理某一个对象的某一个属性的所有响应式函数,相当于替代了原来reactiveFns的数组

class Depend {
    constructor() {
        this.reactiveFns = []
    }
    addDepend(fn){
        this.reactiveFns.push(fn)
    }
    notify(){
        this.reactiveFns.forEach(fn => {
            fn()
        })
    }
}
const dep = new Depend()
function watchFn(fn){
    dep.addDepend(fn)
    fn()
}

监听对象的变化

那么我们接下来就可以通过之前学习的方式来监听对象的变量

• 方式一:通过Object.defineProperty的方式(vue2)
• 方式二:通过new Proxy的方式(vue3)

const proxyObj = new Proxy(obj, {

    get:function(target, key, receiver){

        Reflect.get(target, key, receiver)

        },

    set:function(target, key, value, receiver){

        console.log("set操作")

        Reflect.set(target, key, value, receiver)

        dep.notify()

    }

})

对象的依赖管理

我们需要使用一种数据结构来管理不同对象的不同依赖关系

我们可以写一个getDepend函数专门来管理这种依赖关系,并且实现最基本的响应式操作

vue3响应式实现

    class Depend {
      constructor() {
        this.reactiveFns = new Set()
      }
      depend() {
        if (activeReactiveFn) {
          this.reactiveFns.add(activeReactiveFn)
        }
      }
      notify() {
        this.reactiveFns.forEach((fn) => {
          fn()
        })
      }
    }
    // 保存当前需要收集的响应式函数
    let activeReactiveFn = null
    // 封装一个响应式的函数
    function watchFn(fn) {
      activeReactiveFn = fn
      fn()
      activeReactiveFn = null
    }

    const targetMap = new WeakMap()
    function getDepends(obj,key){
      let map = targetMap.get(obj)
      if(!map){
        map = new Map()
        targetMap.set(obj,map)
      }
      let depend = map.get(key)
      if(!depend){
        depend = new Depend()
        map.set(key,depend)
      }
      return depend
    }

    function reactive(obj) {
      return new Proxy(obj, {
        get(target, key, receiver) {
          const dep = getDepends(target, key)
          dep.depend()
          return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
          Reflect.set(target, key, value, receiver)
          const dep = getDepends(target, key)
          dep.notify()
        },
      })
    }


    //测试
    const objProxy = reactive({
      name: "why",
      age: 18,
    })
    watchFn(() => {
      console.log(objProxy.age)
    })
    objProxy.age=19
    const foo = reactive({
      name: "foo",
    })
    watchFn(() => {
      console.log(foo.name)
    })

vue2响应式实现

    class Depend {
      constructor() {
        this.reactiveFns = new Set()
      }
      depend() {
        if (activeReactiveFn) {
          this.reactiveFns.add(activeReactiveFn)
        }
      }
      notify() {
        this.reactiveFns.forEach((fn) => {
          fn()
        })
      }
    }
    // 保存当前需要收集的响应式函数
    let activeReactiveFn = null
    // 封装一个响应式的函数
    function watchFn(fn) {
      activeReactiveFn = fn
      fn()
      activeReactiveFn = null
    }

    const targetMap = new WeakMap()
    function getDepends(obj,key){
      let map = targetMap.get(obj)
      if(!map){
        map = new Map()
        targetMap.set(obj,map)
      }
      let depend = map.get(key)
      if(!depend){
        depend = new Depend()
        map.set(key,depend)
      }
      return depend
    }

    function reactive(obj) {
      Object.keys(obj).forEach(key =>{
        let value = obj[key]
        Object.defineProperty(obj, key, {
          get(){
            const dep = new getDepends(obj, key)
            dep.depend()
            return value
          },
          set(newValue){
            value = newValue
            const dep = new getDepends(obj, key)
            dep.notify()
          }
        })
      })
      return obj
    }


    //测试
    const objProxy = reactive({
      name: "why",
      age: 18,
    })
    watchFn(() => {
      console.log(objProxy.age)
    })
    objProxy.age=19
    const foo = reactive({
      name: "foo",
    })
    watchFn(() => {
      console.log(foo.name)
    })