frontendchen的博客

new Vue过程中处理，合并options细节

vue2.x源码精度，从构建开始

框架设计 权衡的艺术

10分钟 搞懂 key 对 vue3 diff性能的提升（真的10分钟）没有 key 的源码操作没有 key 的过程如下有 key 的源码操作有 key 的diff 图解如下Talk is cheap, show you the code点击按钮时会在中间插入一个 f我们可以确定的是，这次更新对于ul和button是不需要进行的，需要更新的是我们li的列表：在 vue 中，对于相同父元素的子节点并不会重新渲染整个列表因为对于列表中的a、b、c、d 它们都是没有变化的在操作真实 DOM 的

import Vue from 'vue'import App from './App.vuevar app = new Vue({ el: 'app', render(h) { return h(App) }})我们这里的tag是一个组件对象，所以vnode是通过createComponent()生成，方法的定义是在/vdom/createComponent.js/文件中定义的Ctor可以是一个组件类型的类，或者是函数或对象，data是vnode相关的data,context是.

_update方法挂载在vue原型上，调用的时机有两个，一个是首次渲染的时候把我们的vnode映射成虚拟dom，另一个就是我们改变数据的时候，数据改变驱动视图的变化，同样也会调用_update初始化渲染的时候调用vm.__patch__因为vue也可以运行在服务端，是没有dom的。如果是浏览器环境就调用patch方法否则就是空函数，patch方法里面调用createPatchFunction，参数nodeOps是我们一些操作dom的方法，参数modules是platformModules和b.

createElementcreateElement有6个属性，context是传入的vm实例，tag标签，data是跟vnode相关的数据，children是vnode的字节点，可以构建出整个vnode的tree，下面第一个判断是对参数个数的处理，如果没有传入data，就往前移，data是undefined。下面的是通过对awaysNormalize的判断，对normalizationType赋值常量，最终createElement对参数进行封装处理后返回_createElement调用_crea

_render方法是在让render.js文件定义的，在原型上挂载了这个方法，方法中从$options上拿到render，render可以是手写，也可以是编译生成之后调用render.call(vm._renderProxy, vm.$createElement);，第一个参数是执行的上下文_renderProxy对象，第二个参数$createElement两个createElement的区别就是最后一个参数false和true,一个是手写render函数，另一个是编译生成的render函数。这个.

这里选用的是runtime and compile版本的vue，首先用mount变量缓存起来Vue的原型上挂载的$mount方法，然后又重新定义了$mount方法。这个$mount方法其实是在引入的./runtime/index文件中定义的，为什么要重新定义一遍，因为runtime only 版本是没有这个逻辑的，实际上是给runtime only版本用的当在初始化执行vm.$mount(vm.$options.el)挂载的时候，实际上调用的重写后的$mount函数，这个函数首先对el参数做了一个处理.

简单描述new Vue发生了什么Vue是function实现的class，当执行new Vue()的时候，会进入到这个function，执行this._init()初始化，同时传入options参数，_init方法是在原型上挂载的方法，它是在什么时候被定义的呢？实际上我们初始化的时候下面会执行initMixin()混入，这个方法是在init.js中被定义的，方法中在原型上挂载_init方法_init方法做了一堆初始化的操作，比如定义uid，合并options，它会把传入的options合并到$op