学习笔记6（vue响应式实现和渲染函数）

1. vue 响应式实现

• 学习链接：https://juejin.im/post/6844903981957791757
• 核心概念
  • Watcher：初始化组件实例及更新组件
  • reactive：初始化数据模型data，劫持数据访问与修改
  • dep：收集渲染函数及收到通知执行渲染函数（观察者模式）

1.1 data 响应式

• 使用

const data = reactive({
   
  msg: 'Hello World',
})

new Watcher(() => {
   
  document.getElementById('app').innerHTML = `msg is ${
     data.msg}`
})

• reactive
  • 深度遍历 data，为每个属性添加 getter/setter
  • 访问属性时，订阅、返回值。设置属性时，修改值、通知。

import Dep from './dep'
import {
    isObject } from './utils'

// 将对象定义为响应式
export default function reactive<T extends object>(data: T): T{
   
  
  if (isObject(data)) {
   
    Object.keys(data).forEach(key => {
   
      defineReactive(data, key as keyof T)
    })
  }
  return data
}

function defineReactive<T extends object, K extends keyof T>(data: T, key: K): void {
   
  
  let val = data[key]
  const dep = new Dep()

  Object.defineProperty(data, key, {
   
    get() {
   
      dep.depend()
      return val
    },
    set(newVal) {
   
      val = newVal
      dep.notify()
    }
  })

  if (isObject(val)) {
   
    reactive(val)
  }
}

• dep
  • 观察者模式的具体实现
  • 订阅时，数组新增 watcher。通知时，遍历数组并更新 watcher
  • targetStack
    • 栈（后进先出）, 保存 watcher
    • 设置当前的 Dep.target
    • 嵌套组件watcher运行轨迹：父 -> 子 -> 孙 -> 子 -> 父
  • Dep.target
    • 全局变量
    • 正在渲染(getter)的 watcher

import Watcher from './watcher'

export default class Dep {
   
  static target: Watcher | null | undefined

  deps: Set<Watcher>