修竹

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 通过组件化的方式，将页面按照模块或功能进行拆分，方便团队合作和后期维护。