Vue2部分源码学习（响应式原理、nextTick原理、computed、watch、模版编译、diff算法、key、Vue3新特性）

资源

vue源码地址

源码目录结构

一、响应式原理

理解：

1.核心点: Object.defineProperty

2.默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作。

源码:

二、nextTick实现原理

理解：(宏任务和微任务) 异步方法

nextTick 方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法

源码:

三、Computed、Watch两者区别

理解：

默认 computed 也是一个 watcher 是具备缓存的，只要当依赖的属性发生变化时才会更新视图

computed源码:

watch源码:

四、模版编译原理

理解：

将 template 转化成 render 函数

源码:

HTML Parser 受启于jQuery之父 John Resig

五、diff算法

理解：

1.先同级比较，在比较子节点

2.先判断一方有儿子一方没儿子的情况

3.比较都有儿子的情况

4.递归比较子节点

源码分析1：必要性，lifecycle.js - mountComponent() 组件中可能存在很多个data中的key使用

源码分析2：执行方式，patch.js - patchVnode() patchVnode是diff发生的地方，整体策略：深度优先，同层比较

源码分析3：高效性，patch.js - updateChildren()

源码:

六、v-for中key作用

理解：

1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两 个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug

3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

图解:

七、Vue3.0的新特性

根据尤大的PPT总结，Vue3.0改进主要在以下几点：

1. 更快
   • 虚拟DOM重写
   • 优化slots的生成
   • 静态树提升
   • 静态属性提升
   • 基于Proxy的响应式系统
2. 更小：通过摇树优化核心库体积
3. 更容易维护：TypeScript + 模块化
4. 更加友好
   • 跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、 Android、iOS）一起使用
5. 更容易使用
   • 改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
   • 更好的调试支持
   • 独立的响应化模块
   • Composition API

以上内容如有纰漏，还望指出。 谢谢🙏！