README.md · 维斯/fed-e-task-03-02

# fed-e-task-03-02

#### 介绍
第3部分，第二模块学习

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

#### 一、简答题

#### 1、请简述 Vue 首次渲染的过程。
上图，该图详细讲解了Vue首次渲染的过程。
![Vue 首次渲染的过程](https://images.gitee.com/uploads/images/2021/0115/144902_95dc1157_1813740.png "Vue 首次渲染的过程.png")

先进行 Vue 构造函数的初始化，初始化 Vue 的实例成员、静态成员
- 调用 new Vue()，执行 this._init()
  - 在 init() 中会对 vm 实例进行一系列初始化操作
  - 在 initRender(vm) 中添加了 vm.$createElement 和 vm.c 方法，用来创建 vnode
  - 触发了 beforeCreate 生命周期钩子和 created 生命周期钩子

- 执行 entry-runtime-with-compiler.js 文件中的 vm.$mount()
  - 如果没有手动传入 render 把模板编译为 render 函数
  - 调用 compileToFunctions 生成 render 函数
  - 把生成的 render 函数挂载到 vm.$options 上
- 执行 runtime/index.js 文件中的 vm.$mount()
  - 重新获取 el，在 runtime 版的 vue 中需要
  - 调用 mountComponent(this, el, hydrating)

- 执行 mountComponent(this, el)
  - 触发 beforeMount 生命周期钩子
  - 声明 updateComponent 函数，内部会执行 vm._update(vm._render(), hydrating)
  - 调用 new Watcher 传入 updateComponent 作为 expOrFn 参数
  - 触发 mounted 生命周期钩子

- new Watcher 的初始化过程
  - 将传入的 updateComponent 赋值给 watcher.getter
  - 调用 watcher.get 方法，执行 watcher.getter
  - 触发 vm._update(vm._render(), hydrating)
  - 执行 vm._render()
    - 执行 render.call(vm._renderProxy, vm.$createElement)
    - render 为 new Vue() 时传入的 render 或者从模板编译生成的 render
    - 将 vm.$createElement 传入 render 创建 VNode 并返回
  - 执行 vm._update()  
    - 传入 vm._render 返回的 VNode
    - 调用 vm.\_\_patch\_\_(vm.$el, vnode, hydrating, false) 从 VNode 生成真实 DOM 并挂载到 DOM 树

#### 2、请简述 Vue 响应式原理。
![输入图片说明](https://images.gitee.com/uploads/images/2021/0115/151015_e5678c70_1813740.png "屏幕截图.png")
- 响应式处理入口
  - _init() -> initState() -> initData() -> observe(data, true /* asRootData */)

- 执行 observe(value) 对 data 进行响应式处理
  - 判断 value 是否是对象，不是直接返回
  - 判断 value 是否有 \_\_ob\_\_ 属性，有表示已经处理过，直接返回
  - 调用 new Observer(value) 创建 observer 对象并返回

- 执行 new Observer(value)
  - 在当前创建的 observe 对象上添加 dep 对象，用来收集依赖
  - 给 value 对象定义不可枚举的 \_\_ob\_\_ 属性，记录当前 observer 对象
  - 当传入的 value 是数组时，对数组进行响应式处理
    - 重写数组的操作方法，当重写的方法执行时触发数组 value 对应 dep 内的依赖更新，当插入新值时调用 observeArray 对新值进行响应式处理
    - 调用 observe.observeArray 方法，循环调用 observe 对数组内的值进行响应式处理
  - 当传入的 value 是对象时，调用 walk 方法，执行 defineReactive 为对象的每一个属性进行响应式处理

- 执行 defineReactive
  - 为每一个属性创建 dep 对象，用来收集依赖
  - 如果当前属性值是对象，调用 observe 对属性的值进行响应式处理，返回该值对应的 observe 对象 childOb
  - 为对象的属性定义 getter 和 setter 方法
  - getter 执行时进行依赖收集，收集当前 Dep.target 上的 watcher 对象作为依赖
    - 为属性收集依赖 dep.depend()
    - 为属性对应的值收集依赖 childOb.dep.depend()
    - 当属性对应的值是数组时调用 dependArray 为数组内的元素收集依赖
  - setter 执行时触发 dep.notify() 执行属性对应的依赖

- 依赖收集的触发
  - 在 watcher 对象的 get() 方法中会调用 pushTarget将当前 watcher 对象记录到 Dep.target
  - 在 get 内的 watcher.getter 执行时通常会触发 vm 上响应式数据成员的访问，此时会触发该成员的 getter 来收集依赖
  - 把当前 watcher 对象添加到数据成员属性对应的 dep 的 subs 数组中
  - 当成员的值是对象时，给该值收集依赖，在数据值发生变化时会触发该值的依赖

- 依赖更新的触发
  - 对 vm 上的响应式数据成员进行赋值时会触发该成员的 setter 方法，执行该成员对应 dep 的 notify 方法
  - dep.notify() 会调用 subs 数组内 watcher 对象的 update 方法，按照 watcher 创建的先后顺序调用
  - 在 watcher.update() 内调用 queueWatcher()
    - 判断 watcher 是否被处理，如果没有处理添加到 queue 队列中，并调用 flushSchedulerQueue
  - flushSchedulerQueue 的执行
    - 触发 watcher.before，在渲染 watcher 上会触发 beforeUpdate 生命周期钩子
    - 调用 watcher.run()
      - 渲染 watcher 会执行 updateComponent 重新渲染页面
      - 用户 watcher 执行传入的回调函数
      - 计算属性 watcher 会执行计算属性对应的函数
    - 清空上一次的依赖
    - 触发 actived 生命周期钩子
    - 触发 updated 生命周期钩子

#### 3、请简述虚拟 DOM 中 Key 的作用和好处。
- key 的作用是为了可以跟踪每个节点的身份，在数据变化时，可以最大程度的重用和重新排序现有元素，减少 DOM 操作
- key 的好处是可以在 patch 内执行 updateChildren 进行子节点的 diff 时减少对节点的 DOM 操作
  - 例如由数组 ['a', 'b', 'c', 'd'] 渲染生成的 li 列表，当数据变化为 ['a', 'x', 'b', 'c', 'd'] 时
  - 如果不设置 key，在 updateChildren 内会进行三次修改操作和一次插入操作
  - 在设置 key 的情况下只会进行一次插入操作

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

##### 一、目的
模版编译的目的就是将模版template转换成渲染函数render
AST: 对象形式描述的树形代码结构

- 模板编译是将字符串模板转换成AST对象
- 优化AST对象，过程是标记静态根节点
- 优化好的AST转换成字符串形式代码，之后通过newFunction转换成方法
- 这方法就是最终的render函数

##### 一、入口函数compileToFunctions(template, ...)

位置 src/platforms/web/entry-runtime-with-compiler.js

```
/**
 * 把模版编译成render函数
 * @param {*}
 * @return {*}
 */
Vue.prototype.$mount = function (
...
      // 把 template 转换成 render 函数
      const { render, staticRenderFns } = compileToFunctions(template, {
       ...
      }, this)
      ...
  // 调用 mount 方法，渲染 DOM
  return mount.call(this, el, hydrating)
}

```

- 调用createCompiler(baseOptions)
- 调用createCompilerCreator

```
 // `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 把模板转换成 ast 抽象语法树
  // 抽象语法树，用来以树形的方式描述代码结构
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    // 优化抽象语法树
    optimize(ast, options)
  }
  // 把抽象语法树生成字符串形式的 js 代码
  const code = generate(ast, options)
  return {
    ast,
    // 渲染函数
    render: code.render,
    // 静态渲染函数，生成静态 VNode 树
    staticRenderFns: code.staticRenderFns
  }
})
```

三、compile(template, options)

- 合并options
- 调用baseCompile(template.trim(),finalOptions)返回字符串形式的render函数

三、baseCompile(template.trim(),finalOptions)

- 先调用parse(template.trim(), options) 把模板转换成 ast 抽象语法树
- 调用optimize(ast, options) 
- 标记AST tree树种的静态节点
- 调用 generate(ast, options) 从 AST 生成字符串形式的 js 代码 render 和 staticRenderFns
- 这里是列表文本staticRenderFns 存储了由 optimize 内标记为静态根节点的 AST 子树生成的 render 函数
- staticRenderFns 内的 render 函数生成的 vnode 会被标记为静态的
- 在 patch 阶段会跳过对比静态的 vnode
- 返回字符串形式的 render 和 staticRenderFns

四、compileToFunctions(template, ...)
- 继续把上一步生成的JS代码转换成函数
- createFunction
- render和 staticRenderFns初始化完毕， 挂载到vue实例的options对应的属性中

维斯/fed-e-task-03-02

简介

发行版

贡献者

近期动态

维斯/fed-e-task-03-02 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

维斯/fed-e-task-03-02