# fed-e-part-module-6

**Repository Path**: igor-rub/fed-e-part-module-6

## Basic Information

- **Project Name**: fed-e-part-module-6
- **Description**: vue 1 word
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-18
- **Last Updated**: 2021-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

项目入口
src/platforms/web/entry-runtime-with-compiler.js

渲染过程
1. vue构造函数
// 初始化vue的各种内置对象及静态成员 如data
2. this._init
// 初始化实例成员
3. this.$mount
4. mountComponent
5. new Watcher
6. updateComponent
// 处理莫辨编译
7. vm._render
8. vm._update

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

通过Object.defineProperty的get和set来处理响应式数据，

通过一个观察者模式，绑定依赖， 在get期间搜集依赖，在set期间触发update函数，更新页面数据，通过表单的onchange来实现数据的双向绑定。

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

通过阅读diff算法（updateChildren函数）源码我们可以知道，判断两个节点是否相同是通过sameVnode函数。

function sameVnode(vnode1, vnode2) {
    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
}
如上所示sameVnode是通过key和sel来区分两个节点是否相同，如果没有设置key那么两个VNode的key都是undefined，只需要sel相同即可，那么就会造成数据渲染错误的问题。

在一定程度上设置key的过程更消耗性能，但是在页面渲染和diff过程中。key是不可或缺的。


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

在vue中，可以通过template制定页面，或者是直接通过render制定，如果两个同时存在，那么会执行rener的内容。

模版编译的过程就是通过compileToFunctions，把template解析为render的过程.
1. 先通过createCompiler合并模版和vue实例的选项
2. 通过parse 把模版编译成ast语法树
3. 通过optimize优化语法树
- 在此期间，处理vue的指令和props的关系等
4. 通过generate把ast变成字符串形式的js代码
5. 返回字符串形式代码，并通过new Function转为代码
6. 通过with包裹。变成自执行函数