comedyking的博客

概要：Vue有自带编译器的版本和不带编译器的版本，即runtime +complier 和 runtime 版本。编译器的主要作用是将 .vue的模板编译为render函数，因为在开发的时候，写render函数不符合我们的开发习惯，所以我们平常开发用的都是runtime+complier的版本。而项目打包时，就将编译的工作交由webpack来执行打包编译，即打包后的项目已经是编译好的render函数，这样就不需要vue自带的编译器了，即不需要编译部分的代码，可以减少项目体积。主要源码expo.

源码调试地址https://github.com/KingComedy/vue-debugger什么是异步更新在本轮宏任务内，组件内多个属性更新，或者一个属性更新多次，最终这个组件只会重新渲染一次，即组件里的dom只会做一次重新渲染 如：以下代码只会触发组件的一次更新渲染...

源码调试地址https://github.com/KingComedy/vue-debugger什么是WatcherWatcher是Vue中的观察者类，主要任务是：观察Vue组件中的属性，当属性更新时作相应的操作，即实例化时传入的回调函数 在Vue的对属性做响应式处理时，会收集每个属性的依赖，即每个属性所依赖的watcher，当属性更新时，通知watcher执行更新dom操作。 Watcher有三种类型的，一个是计算属性computed创建的computedWatcher，一个是侦听器wat

updateChildren更新子节点，即执行diff操作创建两组子节点数组的开头索引和结束索引，分别为newStartIndex,newEndIndex,oldStartIndex,oldEndIndex4个索引，通过索引获取数组中的节点进行对比 开始循环对比：(直到两个开始索引 都小于等于 两个结束索引，即oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) sameVnode对比是否相同节点，相同节点执行patc

源码调试地址https://github.com/KingComedy/vue-source-debuggerVue的初始化在引入的Vue的时候，定义了Vue的构造函数，以及初始化了Vue的实例方法和静态方法，总结了有以下一些比较重要的方法：初始化实例方法,主要在src\core\instance\index.js文件里_init方法（Vue实例初始化的方法） 初始化set、set、delete、$watch方法（用于监听或触发响应式更新的方法） 初始化on、on、off、once

Vue的响应式实现流程Vue初始化时，会把data里的所有数据通过Object.defineProperty进行数据劫持，即重写数据的get和set。所以只有初始化时的属性才有响应式，新增的属性得通过$set,才会进行响应式处理 data里的每个属性，都会有属于自己的依赖收集的实例，new Dep。属性get时，进行依赖收集，属性set时，通知所有watcher执行更新函数 对数据做响应式处理后，执行编译。当编译到指令执行dom更新时，同时创建watcher，传入更新函数 watcher初始化时