vue源码

这里介绍了ref、computed、watch和render之间的关系，它们可以简单的归为发布者或订阅者，关系是收集和被收集，信息或数据流向是指向收集和通知的方向，响应式体系围绕着发布订阅者模式展开。

计算属性指的是，数据是由其他数据的复杂计算所得。以下是computed相关的依赖收集和派发更新的实现原理：

响应式指的是，当数据发生变化时，视图会跟着变化。以下是以reactive 为例介绍响应式入口、依赖收集和派发更新的实现原理：

使用vue3的过程中，会有很多经典而又好用的功能。 每一个功能也许我们都能运用得炉火纯青。 甚至某个知识点的原理我们也能娓娓道来。 那么，我们可否能将所有的功能的底层逻辑绘制成一个体系树？

文接上篇的第一步，我们从两个尺度简单介绍解析器针对字符串转换成ast树的过程：通过指针挨个扫描字符，通过指针扫描每行代码。

接上篇，Component.render = compile$1(template, finalCompilerOptions)中的compile就是compileToFunction。

是vue底层或者npm run build时框架loader已经帮我们把template转换成了render函数。接下来我们先介绍template生成render 的调试方式...

vue3底层做了很多优化，其中diff算法是被津津乐道的优化策略之一，也是作为前端面试的选题之一。接下来希望能够以简洁的方式介绍明白这件事儿：

一个项目足够复杂的话，所有代码如果都在一个页面中，那么，就会出现一个文件上万行代码的可能。vue通过组件化，将页面按照模块或功能进行拆分，方便团队合作和后期维护。

关于vue中created和watch的执行顺序相对比较简单，而其中computed是通过Object.defineProperty为当前vm进行定义，再到后续创建vNode阶段才去触发执行。

vue中支持组件化，并且也有用于缓存的内置组件keep-alive可直接使用，使用场景为路由组件和动态组件。

数组结构可以很好的描述嵌套关系，filters的管道模式就是利用其特性，通过|进行分割，前一个执行结果是后一个的第一个参数，并利用其他参数进行过滤灵活性的扩展。

从编译，vNode的获取，再到patch过程，再通过invokeCreateHooks和invokeInsertHook完成了对v-focus的处理。

组件中v-model通过prop和回调函数的方式进行实现。组件的渲染都大底会经历通过编译进行render函数的获取、虚拟DOM的获取和视图渲染过程这三个主要流程。

Vuex是Vue中数据集中化管理的方案，其中通过state、getter、mutation、action和module五个核心属性进行管理，并且module也让数据管理变得模块化。

vue路由是单页面中视图切换的方案，路由点击的过程会分两步：url的替换和真实组件的替换，替换过程会存放在浏览器记录中。

节点或者组件的渲染都大底会经历通过编译进行render函数的获取、虚拟DOM的获取和视图渲染过程这三个主要流程。

生命周期的目的是在实例化Vue的过程中，函数的不同阶段可以调用不同的钩子函数，根据不同阶段的不同特点进行业务逻辑的处理。

开发时无需担心什么时候该将data写为函数还是对象，因为vue内部已经做了处理，并在控制台输出错误信息。

v-if和v-show的使用需要根据场景，一般来说，v-if 有更高的切换开销，而 `v-show` 有更高的初始渲染开销但切换开销较小。