Vue3响应式原理 mini版

最新推荐文章于 2023-07-31 19:21:27 发布

娄兄

最新推荐文章于 2023-07-31 19:21:27 发布

阅读量175

点赞数

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43273755/article/details/117224808

版权

vue3 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

响应关系图谱

在这里插入图片描述
实现原理：
1、定义响应数据creareApp
2、观测响应数据变化effect ,通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter
3、在响应式数据 getter中进行 track依赖收集：建立数据&cb 的映射关系存储于 targetMap
4、当变更响应式数据时，触发 trigger派发更新，根据 targetMap 找到关联的cb执行

reactive.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reactive</title>
</head>
<body>
  <div id="app"></div>
  <script src="./utils/mini-vue3.js"></script>
  <script>
      // 定义一个响应式数据 
      // 初始化定义 reactive 的时候，只会对 obj 浅层定义响应式，而真正读取到 state.msg 的时候，才会对 msg 这一层对象定义响应式
      const state = reactive({
        msg:'message',
        obj: {
          name: 'hello'
        }
      })
      // 观测响应数据变化
      effect(()=>{
        document.getElementById('app').innerText = `${state.msg} + ${state.obj.name} + ${state.obj.c}`
      })

      // 更新响应式数据
      setTimeout(()=>{
        state.msg = 'message' + Math.random()
        state.obj.c = 'ccccc' + Math.random()
      },1000)

      //删除响应数据数据
      setTimeout(() => {
        delete state.obj.name
      }, 2000)
  </script>
</body>
</html>

mini-vue3.js

const isObject = (v) => v !== null && typeof v === 'object'

/* 建立响应式数据 */
function reactive(obj) {
  if (!isObject(obj)) return obj
  const observed = new Proxy(obj, {
    get(target, key, receiver) {
      const ret = Reflect.get(target, key, receiver)
      // 收集依赖
      track(target, key)
      return reactive(ret)
    },
    set(target, key, val, receiver) {
      const ret = Reflect.set(target, key, val, receiver)
      // 触发更新
      trigger(target, key)
      return ret
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key)
      // 触发更新
      trigger(target, key)
      return ret
    }
  })
  return observed
}

/* 声明响应函数cb */
const effectStack = []
function effect(cb) {
  // 对函数进行高阶封装
  const rxEffect = function() {
    // 1.捕获异常
    // 2.cb出栈入栈
    // 3.执行cb
    try {
      effectStack.push(rxEffect)
      return cb()
    } finally {
      effectStack.pop()
    }
  }
  // 最初要执行一次,进行最初的依赖收集
  rxEffect()

  return rxEffect
}

/* 依赖收集：建立 数据&cb 映射关系 */
// 用一个全局的WeakMap结构以target作为key保存该target对象下的key对应的依赖
const targetMap = new WeakMap()
// target是原对象
function track(target, key) {
  // 存入映射关系
  const effectFn = effectStack[effectStack.length - 1] // 拿出栈顶函数
  if (effectFn) {
  // 取出当前target对应的depsMap结构
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      depsMap = new Map()
      targetMap.set(target, depsMap)
    }
    // 根据key取出对应的用于存储依赖的Set集合
    let deps = depsMap.get(key)
    if (!deps) {
      // 收集依赖时 通过 key 建立一个 set
      deps = new Set()
      depsMap.set(key, deps)
    }
    // 这个 effectFn 可以先理解为更新函数存放在dep里
    deps.add(effectFn)
  }
}

/* 触发更新：根据映射关系，触发依赖的effect执行 */
function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (depsMap) {
    const deps = depsMap.get(key)
    if (deps) {
      deps.forEach((effect) => effect())
    }
  }
}

娄兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3响应式原理 mini版

实现原理是：建立proxy对象，获取数据触发proxy对象的get, 进行track依赖收集，修改数据触发proxy对象的set, 进行trigger派发更新。1、定义相应数据creareApp2、定义响应式数据的dom更新函数effect ,通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter3、在响应式数据 getter中进行 track依赖收集：建立数据&cb 的映射关系存储于 targ.
复制链接

扫一扫