二拾四

当我们的模板 template 经过 parse 过程后，会输出⽣成 AST 树，那么接下来我们需要对这颗树做优化，为什么要有优化过程，因为我们知道 Vue 是数据驱动，是响应式的，但是我们的模板并不是所有数据都是响应式的，也有很多数据是⾸次渲染后就永远不会变化的，那么这部分数…

可以看到，生成的 AST 是一个树状结构，每一个节点都是一个ast节点 ，除了它自身的一些属性，还维护了它的父子关系，如 parent 指向它的父节点，children 指向它的所有子节点。为什么是树形因为dom节点本来就是树形结构。 如上案例，我们如何去解析，首先我们看到一个…

createCompiler ⽅法实际上是通过调⽤createCompilerCreator⽅法返回的，该⽅法传⼊的参数是⼀个函数，真正的编译过程都在这个 baseCompile 函数⾥执⾏。 该⽅法返回了⼀个 createCompiler 的函数，它接收⼀个 baseOpti…

可以看到第一次初始化渲染时把旧的vnode赋值给了vm._vnode,后面再次渲染时把首次渲染的vnode赋值给了preVnode，最后调用了vm.patch(prevVnode, vnode) 传入新旧vnode。也就调用了patch函数。这⾥执⾏ patch 的逻辑和⾸次渲…

set ⽅法接收 3个参数， target 可能是数组或者是对象， key 代表的是数组的下标或者是对象的键值， val 代表添加的值。⾸先判断如果 target 是数组且 key 是⼀个合法的下标，则调用数组的splice，这⾥的 splice 其实已经不仅仅是原⽣数组的 s…

JS 执⾏是单线程的，它是基于事件循环的。事件循环⼤致分为以下⼏个步骤： 所有同步任务都在主线程上执⾏，形成⼀个执⾏栈。 主线程之外，还存在⼀个"任务队列"。只要异步任务有了运⾏结果，就在"任务队列"之中放置事件回调。 ⼀旦"执⾏栈"中的所有同步任务执⾏完毕，系统就会读取"任务…

当数据发⽣变化的时候，触发set逻辑，把在依赖过程中订阅的的所有观察者，也就是 watcher ，都触发它们的update过程，这个过程⼜利⽤了队列做了进⼀步优化，在 nextTick 后执⾏所有 watcher 的run ，执行了this.get(),最后执⾏它们的回调函数。…

收集依赖的⽬的是为了当这些响应式数据发生变化，触发它们的 setter 的时候，能知道应该通知哪些订阅者去做相应的逻辑处理，一个key创建一个Dep管家,管家里面存放着与key相关的Watcher。 当对数据对象的访问才会触发他们的 get ⽅法，那么这些对象什么时候被访问呢？…

响应式对象，核⼼就是利⽤ Object.defineProperty 给数据添加了 getter 和setter，⽬的就是为了在我们访问数据以及写数据的时候能⾃动执⾏⼀些逻辑：getter 做的事情是依赖收集，setter 做的事情是派发更新。 Vue会把props,data等…