# fed-e-task-03-02

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-19
- **Last Updated**: 2021-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 一、请简述 Vue 首次渲染的过程。
1、首先是Vue初始化，初始化实例成员和静态成员。<br/>
><font size="2">实例成员包含：实例方法，事件，生命周期；<br />
静态成员包含：添加的全局方法，如：Vue.use, Vue.extend, Vue.mixin, Vue.set等方法。</font>

2、调用Vue的构造函数 new Vue() <br />
> <font size="2">Vue的构造函数调用了this._init()方法，_init()调用this.$mount(), this.$mount()共有两个。<br /> 第一个this.$mount()（入口文件entry-runtime-with-compiler.js）的核心作用是判断是否有render选项，如果没有render，把模板编译成render函数，它是通过compileToFunctions()函数，帮我们把模板编译成render函数的，它会把render函数存在options.render中.<br>
第二个this.$mount()（入口文件是runtime/index.js）如果是运行版本，会重新获取el，然后执行mountComponent()方法。
</font><br >

3、调用mountComponent()方法,mountComponent()（<font color='red'>src/core/instance/lifecycle.js</font>）中定义的，在mountComponent()中，首先会判断render选项，如果没有render，但是传入了模板，并且当前是开发环境的话会发送警告，警告运行时版本不支持编译器。接下来会触发beforeMount这个生命周期中的钩子函数。

4、调用updateComponent()方法，在这个方法中定义了vm._update()和vm._render(), vm._render()渲染，渲染的是虚拟dom，vm._update()更新，将虚拟dom转换成真是dom，并挂在到页面上。

5、创建Watcher实例，传递了updateComponent函数，它是在Watcher内部调用的，在Wather创建完以后调用get方法。

6、触发生命周期中的钩子函数mounted(),最终返回vm实例。

#### 二、请简述 Vue 响应式原理。
###### 1、initState()  ——> initData() ——> obseve() <br />

初始化了 _data、_props、methods 等

###### 2、observe(value)
判断value是否是对象，如果不是对象直接返回，然后value对象是否有__ob__,如果有直接返回，如果没有则创建observer对象，返回observer对象。<br />

###### 3、Observer
- 对对象做响应式处理，调用walk方法 <br />
- 对数组做响应式处理

###### 4、defineReactive
为一个对象定义一个响应式的属性，每一个属性对应一个 dep 对象：<br />
- 如果该属性的值是对象，继续调用 observe
- 如果给属性赋新值，继续调用 observe
- 如果数据更新发送通知

###### 5、Dep类
-  依赖对象
-  记录watch对象
-  发送通知

###### 6、Watch类


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

><font size="2">key值的作用是为了给虚拟DOM提供一个唯一的标识，方便在操作DOM时新旧节点比较，从而提高diff算法效率。</font>

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

1、通过入口函数compileToFunctions先从缓存中加载编译好的render函数，如果缓存中没有则调用compile函数，在compile函数中先合并options，然后调用baseCompile函数。<br />

2、baseCompile函数：<br />
    |____ 解析器（parse）将template转换成AST tree（抽象语法树）; <br/>
    |____ 优化器（optimize）标记AST tree中静态sub trees；检测到静态树，设置为静态，不需要在每次重新渲染的时候重新生成节点<br />
    |____ 通过generate将优化过的AST tree生成js代码。<br>
    
3、通过compileToFunctions函数继续把上一步生成的字符串js代码转换为函数，通过调用createFunciton，当render和staticRenderFns初始化完毕，挂载到Vue实例options对应的属性中。