# fed-e-task-03-02

**Repository Path**: rpyoyo/fed-e-task-03-02

## Basic Information

- **Project Name**: fed-e-task-03-02
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-11
- **Last Updated**: 2021-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、简答题

## 1、请简述 Vue 首次渲染的过程

+ Vue首次渲染的过程首先会进行Vue的初始化操作
	+ 初始化实例成员和静态成员
	+ 注册了全局组件、指令、模块等
+ Vue初始化完成后，`new Vue()`调用构造函数创建实例，构造函数中调用了实例的`_init()`方法，完成实例的初始化操作，并触发相应的`beforeCreate`和`created`钩子函数
+ 实例初始化的最后会调用`vm.$mount()`来挂载DOM元素
	+ 如果选项中没有提供render函数，会尝试将template模板编译成render函数
+ `vm.$mount()`中会调用`mountComponent()`，并依次完成下列操作
	+ 触发`beforeMount()`钩子函数
	+ 定义`updateComponent`，通过调用`render`函数最终通过`patch`来更新DOM
	+ 创建`Watcher`实例(渲染Watcher)，构造函数中会调用传入的`updateComponent()`来更新视图，从而完成首次渲染
	+ 触发`mounted()`钩子函数



## 2、请简述 Vue 响应式原理

+ Vue的响应式原理是指当数据发生了变化，视图会自动完成相应的更新
+ Vue响应式原理是基于观察者模式来实现的，核心是Observer、Watcher、Dep
	+ Observer：将传入对象的所有属性转换成响应式的getter/setter
		+ 对于数组需要进行特殊处理，对会改变数组成员的方法进行补丁处理替换`Array.prototype`原型上的方法
	+ Watcher：负责数据变化时完成相应的更新操作
	+ Dep：负责收集依赖，并将`Watcher`实例保存在subs数组中，当实数变化时调用`notify()`方法向所有watcher派发更新
+ Vue在初始化过程中通过`initData()`初始化data选项，并调用`observe()`将传入的data选项的所有属性转换成响应式数据，响应式属性对应的getter中完成依赖收集，setter中完成`notify()`更新派发，在`mountComponent()`中创建`Watcher`实例



## 3、请简述虚拟 DOM 中 Key 的作用和好处

虚拟DOM中，key的作用是用来标识一个节点，使之在更新操作过程中，当key未发生变化，相应的DOM元素可以被重用，当key发生变化，相应的DOM元素会被强制重新渲染

使用key的好处是

+ 虚拟DOM更新patch操作对多个子节点进行diff算法比较时，如果不设置key，默认key都是undefined，当没有找到sameVnode，能找到相同key但是找不到sameVnode的节点会重新创建DOM，原有的DOM会在最后被销毁，从而造成不必要的性能损耗，通过设置key可以有效的避免不必要的DOM创建与销毁，从而提升渲染性能，这个对于使用v-for指令条件渲染的多子节点的情况尤其明显
+ 某些时候可以通过使用key来达到强制重新渲染特定内容的效果



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

+ 模板编译的过程是将模板字符串转换成`render`渲染函数的过程
+ `render`函数通过`compileToFunctions()`函数创建
	+ 优先返回缓存中已编译好的`render`函数
	+ 如果缓存中没有，调用`compile`函数创建
+ `compile`函数主要合并了`options`，主要的编译逻辑通过`baseCompile`函数来完成
+ `baseCompile`函数实现了模板的解析、优化、生成三个核心步骤
	+ parse：解析，将模板字符串template转换成AST抽象语法树
	+ optimize：优化，标记AST中的静态子树，避免不必要的重新渲染以及patch过程
	+ generate：将AST生成js字符串代码
+ 在``compileToFunctions`函数中，最终字符串代码通过`createFunction`函数，使用`new Function(code)`的方式转换成实际执行的渲染函数，并最终挂载到Vue实例对应的options属性`render`与`staticRenderFns`中