Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

1.请简述 Vue 首次渲染的过程。

• vue初始化，实例成员，静态成员
• new vue()
• this._init()
• vm.$moment()
  • 运行时编译器版本vue
  • 如果没有传递render
  • 通过compileTofunctions() 生成render()渲染函数
  • options.render = render
• vm.$moment()
  • 运行时版本vue.js
  • mountComponent()
• mountComponent(this, el)
  • 触发beforeMount
  • 定义updatecomponent
    • vm.update(vm.render,…)
    • vm.render()渲染虚拟dom
    • vm.undate()更新，将vDom转换成真实Dom
  • 创建Watch 实例 把updateComponent传递
  • 触发mounted
  • return vm
• watcher.get()
  • 创建完watcher 会调用一次get
  • 调用updateComponent()
  • 调用vm.render()创建vnode
    • 调用render.call(vm.renderProxy,vm.$createElement)
    • 调用实例化Vue传入的render()
    • 或者编译template 生成的render()
    • 返回vnode
  • 调用vm.update(vnode)
    • 调用vm.patch(vm.$el,vnode)挂载真实dom
    • 记录vm.$el

2.请简述 Vue 响应式原理。

• vue在选项的初始化时执行

// 数据的初始化 
if (opts.data) {  
	initData(vm)
 } else {  
 	observe(vm._data = {}, true /* asRootData */) 
 }

• vm 数据的初始化做了响应式处理

function initData (vm: Component) {
......
  // observe data 
   // 数据的响应式处理  
   observe(data, true /* asRootData */) 
}

• observe 方法负责为每一个 Object 类型的 value 创建一个 observer 实例（递归到所有的属性）

  • 通过walk(obj) 遍历 obj 的遍历 obj 的所有属性，为每一个属性调用 defineReactive() 方法，设置 getter/setter
  • defineReactive
    • 为一个对象定义一个响应式的属性，每一个属性对应一个 dep 对象
    • 如果该属性的值是对象，继续调用 observe
    • 如果给属性赋新值，继续调用 observe
    • 如果数据更新发送通知

• observe 通过观察者模式创建观测对象和依赖对象，和观测对象

• 执行过程

  • 数组响应式处理的核心过程和数组收集依赖的过程
  • 当数组的数据改变的时候 watcher 的执行过程

3.请简述虚拟 DOM 中 Key 的作用和好处。

• 作用 区分对比vnode是否为相同dom的依据之一，更加快速准确的区分虚拟dom并更新
• 如果通过v-for循环生成的复选框虚拟dom，没有key时，key都为undefined，如果顺序改变，此时虚拟dom更新时，key相同都为undefined，其他相同，显示不同时，只更新显示的lable，认为是相同的dom，选中的状态不会更新

4.请简述 Vue 中模板编译的过程。

• 模版编译的过程：解析、优化、生成
• 在src\platforms\web\entry-runtime-with-compiler.js中.$mount 将// 把 template 转换成 render 函数

Vue.prototype.$mount = function ( 
 ……  
	// 把 template 转换成 render 函数  
	const { render, staticRenderFns } = compileToFunctions(template, {    
		outputSourceRange: process.env.NODE_ENV !== 'production',    
		shouldDecodeNewlines,  
	 	shouldDecodeNewlinesForHref, 
	    delimiters: options.delimiters, 
	    comments: options.comments  }, this)  
	    options.render = render  
	    options.staticRenderFns = staticRenderFns  
    …… 
 )

• 生成compileToFunctions方法
  • createCompiler(baseOptions)
    • 定义complie(template,options)函数
    • 生成compileToFunctions
    • 返回{complie,compileToFunctions}
• 生成createCompiler方法
  • createCompilterCreator(function baseCompile(){})
    • 传入了baseCompile函数
    • baseCompile
      • 解析parse
      • 优化optimeze
      • 生成generator
    • 返回createCompiler函数