船长的航行日记
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)

captain

心之所向,海的彼岸
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)
  • JavaScript

  • node

  • vue组件库开发实践

  • react

  • 学习笔记

  • vue3源码

    • 如何阅读Vue3源码
    • 如何理解响应式
    • 实现手动执行的响应式
    • 实现自动执行的响应式
    • 实现对象多个属性对应的依赖的收集
    • 实现多个对象对应的依赖的收集
    • 实现ref
    • 优化
    • 总结
    • 前端乱炖
    • vue3源码
    masongsong
    2021-10-19
    时间 2分钟
    阅读量 0

    总结

    # 小结

    这样我们就手动实现了Vue3响应式模块的主线逻辑。当然,Vue3源码中的实现,远比这要复杂很多。同时Vue3还提供了很多响应式相关的API,比如:readonly、toRef等等,但是其实主要实现逻辑也是在我们之前实现的逻辑之上再进行扩展完善,所以当你看完之前所有的文章,你再回过头去看Vue3响应式相关的源码,应该会轻松很多。最后总结一下,之前讲到的内容,我们实现了Vue3中的响应式逻辑,主要是:

    • track 函数 -----> 负责收集依赖
    • effect 函数 ------> 用户提供依赖函数的入口
    • trigger 函数 ------> 触发依赖
    • reactive 函数 ------> 引用类型的响应式API
    • ref 函数 ------> 基本类型的响应式API
    • activeEffect -------> 全局变量 将 track 和 effect 产生联系
    • effectStack --------> 类似函数调用栈的方式 解决嵌套的effect问题

    # 彩蛋(关于reactivity中让人惊艳的部分)

    • 使用位运算提高effect的收集和执行效率
    • 函数柯里化,比如:定义proxy的get陷阱的时候 有 shallowGet 和 readonlyGet 中
    • 使用 createGetter 根据参数的不同执行不同的行为
    • 对集合类型进行响应式包装时候的处理。比如对数组进行处理,执行arr.push(1)的时候,其实会引起数组
    • 元素 和 长度 的变化,这会导致依赖的重复执行等等

    # 参考链接

    • vue3响应式原理 (opens new window)
    • vu3官方文档 (opens new window)
    • vue-next (opens new window)
    • 细说 Vue.js 3.2 关于响应式部分的优化 (opens new window)
    • vue3响应式原理 (opens new window)
    编辑 (opens new window)
    上次更新: 2021/10/30, 16:48:40
    优化

    ← 优化

    最近更新
    01
    优化
    10-16
    02
    实现ref
    10-16
    03
    实现多个对象对应的依赖的收集
    10-16
    更多文章>
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 生命绿
    • 收获黄
    • 天空蓝
    • 激情红
    • 高贵紫