Vue的内部运行机制

Vue的内部运行机制

序

最近做了一个关于Vue的内部运行机制的分享会，记录一番笔记。

目录大纲

• 概述
• 初始化及挂载
• 响应式的实现
• 编译
• Virtual DOM和数据更新时的patch()

概述

• 初始化
  • 初始化生命周期、事件、render、state
  • Object.definePrototy() 响应式的定义
• 挂载 （运行时 + 编译器）
  • template到render Function的编译
  • 注册watcher
  • 响应式的触发
• patch的diff算法更新机制
• nextTick的异步更新策略

初始化及挂载

Vue的实现首先是通过Vue类里面构造函数中所执行的init()。
_init的函数里面主要包括：

1. 主要包括初始化生命周期、初始化事件、初始化render，初始化state(包括props、data，method、computed、watchers)。
2. 执行vm.$mount()挂载组件

初始化以及挂载包括了Vue实例的整个前半的生命周期，在这个过程中，Vue完成了模板到真实DOM的显示，以及data与View的响应式绑定监控。

响应式的实现

关于Object.definePrototy()

• Object.definePrototy() :
  • 概念：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
  • 参数：obj、prop、descriptor
  • 类型：数据描述符、存取描述符
  • descriptor ：
    • configureable （数据描述符 & 存取描述符）
      当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默 认为 false。
    • emunerable（数据描述符 & 存取描述符）
      当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
    • writable （数据描述符）
      当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。
    • value （数据描述符）
      该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
    • set （存取描述符）
      一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认undefined。
    • get（存取描述符）
      一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认undefined。

依赖注入和更新视图

• 一个Vue类的构造函数中绑定data
• 为data注册 Observer
  • 对data中的每个key值调用Object.definePrototype
  • 在get中执行dep.depend()进行依赖绑定
  • 在set中执行dep.notify()通知观察者进行视图更新
• 在$mouted执行挂载(运行中+编译器版本)
  • 编译模板将data对象和vue语法声明的模板编译成浏览器可读的html
  • 注册一个观察者Watcher，并将它的getter绑定为vm._update(vm._render())
  • 在将Dep.target设置为自生观察者实例，执行getter操作，即为执行了vm._update()
  • 在vm._update()中如果需要渲染某个数据就会触发本身的getter，完成依赖收集
• 当某个值被改变的时候
  * 触发set中的dep.notify()通知观察者进行视图更新
  * notify调用dep.subs中的每一个watcher的run()进而触发watcher的getter()
  * 进而触发vm._update(vm._render())进行重新渲染VNode与patch
  * 在patch中将新老的VNode进行diff算法分析，找到最小结构，进而更新到真实的DOM上

简单代码示例

		let uid=0
		class Dep {
   
		    constructor(){
   
		        this.id = uid++
		        this.subs=[]