vue源码

vue中的编译过程将字符串转换成了ast树，这正是神奇的地方。本文将以图文结合的方式探索`vue`底层是如何用解析器将`字符串`转换成`ast树`的。

在平时开发中，我们都会写template，在vue底层，会将template编译成render函数。vue的编译原理相对复杂，本文的主要目标是找到编译主入口。

本文将以发布订阅者的视角来探索ref、computed、watch和render之间的底层关系。重点关注Dep-发布者核心类和ReactiveEffect-订阅者核心类。

侦听器的底层原理：发布订阅者模式，RefImpl类的实例是一个发布者，watch对应的逻辑是一个订阅者。

响应式就是当数据变化时会自动执行某些操作。但是，computed的响应式和ref和reactive有所不同，ref和reactive是发布订阅者模式中的发布者，而computed既是发布者又是订阅者。

reactive是一个特别常用的API，在Vue3中，reactive函数是用来创建一个响应式对象。底层用到了哪些技术呢？我们一起来探索...

响应式的定义：当数据发生变化时，视图会跟着变化。 响应式的底层原理：发布订阅者模式，RefImpl的实例是一个发布者，ReactiveEffect的实例可以是一个订阅者。

vue3写v-for时，必须要写key嘛? 答：如果无需对列表增删改，列表不会再变化，可以不写。否则，为了列表修改时的复用，需要写，且推荐用渲染数据的唯一标识作为key。如果实在不确定写不写，那就写。

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

vue3框架的使用极大提高了项目开发效率，我们不断的使用着耳熟能详的vue api去完成业务功能，却往往忽略其背后复杂而又精妙的实现原理。本文就将以debugger的方式对vue3源码进行调试。

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

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

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

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

关于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也让数据管理变得模块化。