Vue 3响应式原理学习笔记（一）

2021-8-10 09:48:048

#前端#vue

22

前言

本博文用于记录学习Vue 3响应式原理课程的学习笔记。 Vue 3响应式原理

笔记

Reactivity

响应式引擎原理

• effect --- 保存的代码
• track() --- 保存代码
• effect() --- 运行保存代码
• trigger() --- 运行所有保存代码
• dep ---存储effect，代表依赖关系，是一个新的Set（集）
• 为了跟踪依赖，将effect添加到Set中
• Set特性：不允许重复值
• 响应式意味着effect集应该在值发生改变时重新运行

let price = 5
let quantity = 2
let total = 0
//用于存储effect代码
let dep = new Set()
let effect = () => { total = price * quantity }

//添加effect代码到dep集中
function track() { dep.add(effect) }
//遍历存储在dep中的代码并运行
function trigger() { dep.forEach(effect => effect()) }

track()
effect()

• depsMap
  • 一张存储了dep对象的每个属性图
  • 键（key）：对象的属性名
  • 值（value）：dep（effects集）

const depsMap = new Map()
function track(key) {
  let dep = depsMap.get(key)
  if(!dep) {
    depMap.set(key, (dep = new Set()))
  }

  dep.add(effect)
}

function trigger(key) {
  let dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => {
      effect()
    })
  }
}