Vue3响应系统_vue 3提供的内置响应式系统

响应式系统的作用和实现

响应系统是Vue.js的重要组成部分，主要由两部分组成，一是响应式数据，二是副作用函数，副作用函数本质上就是函数包裹器，用于跟踪正在运行的函数，在函数调用前启动跟踪，在Vue派发更新时就能找到这些被收集起来的副作用函数，当数据发生更新时就会重新执行它
响应式系统的工作流程：当读取操作时，将副作用函数收集到"桶"中；当设置操作时，从桶中取出副作用函数并执行
下面是组件自身初始化的部分代码

由上述的组件对象，可以执行以下操作
const { data , render } = 组件对象
(1) 调用data函数，将其包装成响应式数据
const state = reactive(data())

effect(()=>{
    (2) 调用render函数得到subTree
    const subTree = render.call(state,state)
    (3) patch
    patch(null,subTree)
})
这样实现了组件自身的响应式数据发生变化，那么组件就会自动执行渲染函数，从而实现更新
1
2
3
4
5
6
7
8
9
10
11
12

1.响应式数据和副作用函数

副作用函数：会产生副作用的函数(废话)
响应式数据：在我们读取某值是，添加副作用函数，待值发生改变，即设置操作，可以使副作用函数重新执行

2.响应式数据的基本实现

如何将数据obj变成响应式？
主要两个步骤(还是上面所述)：

1. 读取obj时，将副作用函数effect存储在某个数据结构“桶”中(weakMap)
2. 当进行设置操作时，在将副作用函数effect从“桶”中取出并执行

Vue2中采用的Object.definePrototype函数实现，而Vue3中采用的是代理的方式
首先我么需要知道Object.definePrototype函数的所出现的问题：

• Object.defineProperty()监听对象的属性而非对象本身
• 这就导致了必须遍历对象中的每个属性
• 如果对象中某属性依旧是对象，需要递归调用
• 对于动态插入对象的属性，需要手动添加监听
• 无法监听数组变化，这也就是Vue2为何重写了数组中七个方法的原因（push，pop,unshift,shift,reverse,sort,splice）这些方法调用原数组会发生改变
  为了解决上述一些问题，Vue3引入了Proxy,那么Proxy有哪些优点？
• Proxy可以直接监听数组变化
• Proxy可以直接监听对象而非对象属性
• Proxy有13种拦截方法，更加丰富

通过一个简单的例子了解一下：

    const bucket = new Set()
    const data = {
      text:'hello'
    }
    let proxy = new Proxy(data,{
      get(target,key){
        bucket.add(effect)
        return target[key]
      },
      set(target,key,newValue){
        target[key] = newValue
        bucket.forEach(fn=>fn())
        return true
      }
    })
    //注册副作用函数
    function effect(){
      document.body.innerHTML = proxy.text
    }
    //执行副作用函数，触发读取操作
    effect()
    setTimeout(()=>{
      proxy.text = 'Vue'
    },1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.完善的响应式系统

上面代码是个小型的简单的响应系统，出现的问题已经还是很多，硬编码了副作用函数，我们需要的是哪怕副作用函数是一个匿名函数，也可以被正确的收集到“桶”数据结构中，另外，如何设计这个“桶”结构又是个问题
首先需要设计一个注册副作用函数的effect函数，那么即使是匿名函数可以先注册，再被收集

//使用全局变量存储被注册的副作用函数
let activeEffect
//注册副作用函数
function effect(fn){
  activeEffect = fn
  fn()
}
1
2
3
4
5
6
7

桶的设计需要将副作用函数和被操作的目标字段之间建立明确联系，所以需要在三个角色中建立联系，被操作的代理对象obj,被操作的字段名text,使用effect函数注册的副作用函数effectFn,Vue3中采用的WeakMap，WeakMap由target和Map组成，Map由key和Set组成，WeakMap的键是目标对象target，值是一个Map实例，而Map实例时原始对象target的key，Map的值是由一个副作用函数组成的Set
至于为什么使用WeakMap原因：

• 这是ES6新增的弱映射，什么叫弱，描述的是JS垃圾回收程序对待弱映射中键的方式
• WeakMap的键必须是对象，所引用的对象是弱引用，如果对象的其他引用被删除，那么回收机制就会释放该对象所占的内存
• 对象作为WeakMap的键，如果没有指向该对象的应用，那么当代吗执行完，这个对象键就会消失，然后这个键/对就会从弱映射中消失，成为一个空映射，那么就会变成垃圾回收的目标
• 可以设想，如果target对象没有任何应用，说明用户并不需要它了，那么垃圾回收机制就会完成回收任务，但是如果通过Map来代替WeakMap，那么用户的代码没有任何应用，这个target也不会被回收，最终就会导致内存的溢出
  将上述代码进行补充和封装，得到代码如下：

const proxy = new Proxy(data,{
  get(target,key){
    track(target,key)
    return target[key]
  },
  set(target,key,newValue){
    target[key] = newValue
    trigger(target,key)
  }
})

function track(target,key){
  if(!activeEffect) return 
  let depsMap = bucket.get(target)
  if(!depsMap){
    bucket.set(target,depsMap = new Map())
  }
  let deps = depsMap.get(key)
  if(!deps){
    depsMap.set(key,deps = new Set())
  }
  deps.add(activeEffect)
}

function trigger(target,key){
  const depsMap = bucket.get(target)
  if(!depsMap) return 
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn());
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4.computed和lazy

调度器scheduler用来控制副作用函数执行的时机和方式
基本流程：
首先定义一个conputed函数，接收参数为getter函数，将getter函数作为副作用函数，用它来创建一个带有Lazy的effect.computed函数会返回一个对象，该对象的value属性是一个访问器属性，只有在读取value值时，才会手动调用effectFn函数并返回结果。另外，在调度器中增加dirty属性标识确定是否需要重新计算，如果dirty为true时，表示值被污染，那么需要重新计算。computed的值可以被缓存就是这个原理

function computed(getter){
  let value,dirty = true
  const effectFn = effect(getter,{
    lazy:true,
    scheduler(){
      if(!dirty){
        dirty = true
        //当计算属性依赖的响应式数据发生变化，手动调用trigger函数触发响应
        trigger(obj,'value')
      }
    }
  })
  const obj = {
    get value(){
      if(dirty){
        value = effectFn()
        dirty = false
      }
      //当读取value时，手动调用track函数进行跟踪
      track(obj,'value')
      return value
    }
  }
  return obj
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5.watch实现

本质上就是检测响应式数据，当数据发生变化时通知并执行响应的回调函数
定义一个watch函数，接收的参数是source和cb，如果source是函数，那么将其传给getter；如果是对象，则递归读取，通过调度器执行回调函数cb

watch(
  () => obj.foo,
  (newValue,oldValue) => {
    console.log(newValue,oldValue)//1,2
  }
)

obj.foo ++

function watch(source,cb){
  let getter
  if(typeof source === 'function'){
    getter = source
  }else{
    getter = ()=> traverse(source)
  }
  //定义新值和旧值
  let oldValue , newValue
  const effectFn = effect(
    () => getter(),
    {
      lazy:true,
      scheduler(){
        newValue = effectFn()
        cb(newValue,oldValue)
        oldValue = newValue
      }
    }
  )
  oldValue = effectFn()
}
//如果传入的参数是对象，这样就能读取对象上的任意属性，从而属性发生变化都能触发回调函数的执行
function traverse(value,seen = new Set()){
//如果读取的值是原始值或者已经读取过了，那么直接跳过
  if(typeof value !== 'object' || value == null || seen.has(value)) return 
  seen.add(value)
  for(let k in value){
    traverse(value[k],seen)
  }
  return value
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

非原始值的响应式方案

Proxy和Reflect

代理和反射是为开发者提供拦截并向基本操作嵌入额外行为的能力
代理是对目标对象的一种关联的代理对象，而这个代理对象可以作为抽象的目标对象来进行使用

const target = {
  id:'001'
}

const handler = {}
const proxy = new Proxy(target,handler)
console.log(target.id)//001
console.log(proxy.id)//001
1
2
3
4
5
6
7
8

代理是目标对象的抽象，使用代理的目标就是为了定义捕获器，捕获器就是在处理程序对象中定义基本操作的拦截器，每个捕获器都对应一种基本操作，可以直接在代理对象上调用；处理程序对象中所有可以捕获的方法都有响应的反射（Reflect）API方法，这些方法与捕获器拦截的方法具有想用的名称和函数签名，而且也具有与被拦截方法相同的行为

1.get()
const target = { }
const proxy = new Proxy(target,{
  get( target,property,receiver){
    console.log('get()')
    return Reflect.get(...arguments)
  }
})
proxy.foo//get()
//捕获器处理程序参数
--target:目标对象
--property:应用目标对象上的字符串键属性
--receiver代理对象或继承代理对象的对象

2.set()
const target = { }
const proxy = new Proxy(target,{
  set( target,property,value,receiver){
    console.log('set()')
    return Reflect.set(...arguments)
  }
})
proxy.foo = 'bar'//set()
//拦截操作
--proxy.property = value
--proxy[property] = value
//捕获器处理程序参数
--target:目标对象
--property:应用目标对象上的字符串键属性
--value:赋值给属性的值
--receiver代理对象或继承代理对象的对象

3.has()
const target = { }
const proxy = new Proxy(target,{
  has( target,property){
    console.log('has()')
    return Reflect.has(...arguments)
  }
})
'foo' in proxy//has()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

那么为什么Proxy要配合Reflect一起使用呢

1. 触发代理对象劫持时保证正确的this上下文指向
   在内部打印

console.log(receiver === proxy)//true
1

表示这里的receiver的确是代理对象，可以将Reflect.get(target,key,receiver)理解为target[key].call(receiver),this变成了代理对象，才会在副作用函数和响应式数据之间建立响应联系，从而达到收集依赖的效果。
2. 框架的健壮性
使用 Object.defineProperty() 重复声明的属性 报错了，因为 JavaScript 是单线程语言，一旦抛出异常，后边的任何逻辑都不会执行，所以为了避免这种情况，我们在底层就要写 大量的 try catch 来避免，不够优雅。使用 **Reflect.defineProperty() 是有返回值的，所以通过 返回值 来判断你当前操作是否成功

代理对象

对象必要的内部使用方法

• [[GetPrototypeOf]] 查明为该对象提供继承属性的对象
• [[SetPrototypeOf]] 将该对象与提供继承属性的另一个对象向关联
• [[IsExtensible]] 查明是否允许向该对象添加其他属性
• [[PreventExtensions]] 控制是否允许向该对象添加其他属性
• [[GetOwnProperty]] 返回该对象自身属性的描述符
• [[DefineOwnProperty]] 创建或更改自己的属性
• [[HasProperty]] 返回该对象是否已经拥有键为propertyKey的自己的或继承的属性
• [[Get]]
• [[Set]]
• [[Delete]]
• [[OwnPropertyKeys]] 返回list,元素为对象自身的属性键
• [[Call]] 将运行代码和this对象关联
• [[Constructor]] 创建一个对象，
  代理对象本质上就是进行“读取”操作，响应系统拦截一切读取操作，数据发生变化时触发响应
  正常对象的可能读取操作如下：
• 访问属性：obj.foo
• 判断给定key是否在对象或原型上：key in obj
• 使用for…in循环遍历对象：for(let key in obj){}

对于正常的额访问属性，直接通过get拦截函数实现

const obj = {foo:1}
const p = new Proxy(obj,{
  get( target,key,receiver){
  //建立联系
    track(target,key)
    //返回属性值
    return Reflect.get(target,key,receiver)
  }
})
1
2
3
4
5
6
7
8
9

in关键字如何拦截，通过has

const obj = {foo:1}
const p = new Proxy(obj,{
	has(target,key){
		track(target,key)
		return Reflect.has(target,key)
	}
})
1
2
3
4
5
6
7

for…in循环

const obj = {foo:1}
const ITERATE_KEY = Symbol()
let p = new Proxy(obj,{
  ownKeys(target){
    track(target,ITERATE_KEY)
    return Reflect.ownKeys(target)
  } 
})
1
2
3
4
5
6
7
8