Vue.js尚硅谷视频学习笔记(第7 章：vue 源码分析)

内容来自尚硅谷课件

7.1. 说明

1. 分析vue 作为一个MVVM 框架的基本实现原理
   数据代理
   模板解析
   数据绑定
2. 不直接看vue.js 的源码
3. 剖析github 上某基友仿vue 实现的mvvm 库
4. 地址: https://github.com/DMQ/mvvm

7.2. 准备知识

1. [].slice.call(lis): 将伪数组转换为真数组
2. node.nodeType: 得到节点类型
3. Object.defineProperty(obj, propName, {}): 给对象添加/修改属性(指定描述符)
   configurable: true/false 是否可以重新define
   enumerable: true/false 是否可以枚举(for…in / keys())
   value: 指定初始值
   writable: true/false value 是否可以修改
   get: 回调函数, 用来得到当前属性值
   set: 回调函数, 用来监视当前属性值的变化
4. Object.keys(obj): 得到对象自身可枚举的属性名的数组
5. DocumentFragment: 文档碎片(高效批量更新多个节点)
6. obj.hasOwnProperty(prop): 判断prop 是否是obj 自身的属性

7.3. 数据代理

1. 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2. vue 数据代理: 通过vm 对象来代理data 对象中所有属性的操作
3. 好处: 更方便的操作data 中的数据
4. 基本实现流程
   a. 通过Object.defineProperty()给vm 添加与data 对象的属性对应的属性描述符
   b. 所有添加的属性都包含getter/setter
   c. getter/setter 内部去操作data 中对应的属性数据

7.4. 模板解析

7.4.1. 模板解析的基本流程

1. 将el 的所有子节点取出, 添加到一个新建的文档fragment 对象中
2. 对fragment 中的所有层次子节点递归进行编译解析处理

• 对大括号表达式文本节点进行解析
• 对元素节点的指令属性进行解析
• 事件指令解析
• 一般指令解析

3. 将解析后的fragment 添加到el 中显示

7.4.2. 模板解析(1): 大括号表达式解析

1. 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name
2. 从data 中取出表达式对应的属性值
3. 将属性值设置为文本节点的textContent

7.4.3. 模板解析(2): 事件指令解析

1. 从指令名中取出事件名
2. 根据指令的值(表达式)从methods 中得到对应的事件处理函数对象
3. 给当前元素节点绑定指定事件名和回调函数的dom 事件监听
4. 指令解析完后, 移除此指令属性

7.4.4. 模板解析(3): 一般指令解析

1. 得到指令名和指令值(表达式) text/html/class msg/myClass
2. 从data 中根据表达式得到对应的值
3. 根据指令名确定需要操作元素节点的什么属性

• v-text—textContent 属性
• v-html—innerHTML 属性
• v-class–className 属性

4. 将得到的表达式的值设置到对应的属性上
5. 移除元素的指令属性

7.5. 数据绑定

7.5.1. 数据绑定

一旦更新了data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会
更新

7.5.2. 数据劫持

1. 数据劫持是vue 中用来实现数据绑定的一种技术
2. 基本思想: 通过defineProperty()来监视data 中所有属性(任意层次)数据的变化, 一旦变
   化就去更新界面

7.5.3. 四个重要对象

1. Observer
   a. 用来对data 所有属性数据进行劫持的构造函数
   b. 给data 中所有属性重新定义属性描述(get/set)
   c. 为data 中的每个属性创建对应的dep 对象
2. Dep(Depend)
   a. data 中的每个属性(所有层次)都对应一个dep 对象
   b. 创建的时机:

• 在初始化define data 中各个属性时创建对应的dep 对象
• 在data 中的某个属性值被设置为新的对象时
  c. 对象的结构
  {
  id, // 每个dep 都有一个唯一的id
  subs //包含n 个对应watcher 的数组(subscribes 的简写)
  }
  d. subs 属性说明
• 当watcher 被创建时, 内部将当前watcher 对象添加到对应的dep 对象的subs 中
• 当此data 属性的值发生改变时, subs 中所有的watcher 都会收到更新的通知,从而最终更新对应的界面

3. Compiler
   a. 用来解析模板页面的对象的构造函数(一个实例)
   b. 利用compile 对象解析模板页面
   c. 每解析一个表达式(非事件指令)都会创建一个对应的watcher 对象, 并建立watcher
   与dep 的关系
   d. complie 与watcher 关系: 一对多的关系
4. Watcher
   a. 模板中每个非事件指令或表达式都对应一个watcher 对象
   b. 监视当前表达式数据的变化
   c. 创建的时机: 在初始化编译模板时
   d. 对象的组成
   {
   vm, //vm 对象
   exp, //对应指令的表达式
   cb, //当表达式所对应的数据发生改变的回调函数
   value, //表达式当前的值
   depIds //表达式中各级属性所对应的dep 对象的集合对象
   //属性名为dep 的id, 属性值为dep
   }
5. 总结: dep 与watcher 的关系: 多对多
   a. data 中的一个属性对应一个dep, 一个dep 中可能包含多个watcher(模板中有几个
   表达式使用到了同一个属性)
   b. 模板中一个非事件表达式对应一个watcher, 一个watcher 中可能包含多个dep(表
   达式是多层: a.b)
   c. 数据绑定使用到2 个核心技术

• defineProperty()
• 消息订阅与发布

7.6. MVVM 原理图分析

7.7. 双向数据绑定

1. 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的
2. 双向数据绑定的实现流程:
   a. 在解析v-model 指令时, 给当前元素添加input 监听
   b. 当input 的value 发生改变时, 将最新的值赋值给当前表达式所对应的data 属性