Vue源码篇

1、Vue三要素
1）响应式
vue如何监听到 data 每个属性变化？
2）模板引擎
vue的模板如何被解析，指令如何处理？
1】本质是字符串，是以字符串存在的，只不过像html
2】有逻辑，比如判断，循环这些，如v-if，v-for等，怎么会有逻辑呢，之前写html就没逻辑
3】与html格式很像，但有很大区别。首先html在语法上是不认识v-if,v-for这些的。第二个是html是静态的，没有逻辑，vue是动态的，有逻辑的。它们只是格式很像
3）渲染
vue 的模板如何被渲染成 html？以及渲染过程
浏览器只认识html，不能解析vue格式的模板引擎，因此，vue要将其转换为浏览器认识的html+css+js。
1】把模板编译为 render函数
（render 函数即渲染函数，它的参数也是个函数，即 js 的 createElement，返回值是虚拟dom）
2】实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
3】虚拟dom对比数据更新的差异，渲染到真实dom
4】监听组件内部data，若发生变化，重新调用render函数，生成虚拟dom, 返回到步骤3

2、Vue模版编译原理知道吗，能简单说一下吗？
简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：
a. 生成AST树
b. 优化
c. codegen
首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的AST树转换为可执行的代码。

3、vue 的双向绑定（MVVM）的原理是什么 ?（响应式原理）
1）首先什么是响应式？
响应式就是，当监听到数据发生变化后，无需进行DOM操作，会自动重新渲染页面。
2）想完成这个过程，我们需要：
1】侦测数据的变化（数据劫持）
2】收集视图依赖了哪些数据（依赖收集）
3】数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）
a、vue2.x
通过一个observer函数（观察者），去遍历data()，拿到data里面的每一项变量之后，通过以下的方式去代理监听：

vue中的数据响应式其实是个发布订阅模式：
通过Object.defineProperty() 通过遍历对象(data())，来劫持对象的setter和getter。
在数据劫持中，get函数是触发监听，把data()里面的每一个属性都绑定上了一个Watcher。
set函数是发布者，因为只要数据已更新，就会触发set函数，set函数就会告诉Dep让其执行notify，相当于this.$emit(‘notify’)。
Dep是调度中心，负责收集依赖和收到发布者的命令执行notify方法，调度中心通知Watcher执行更新方法。Watcher去调用自己的update方法，经历Diff算法，最终执行render()去更新DOM。
get函数是订阅者，用于订阅Watcher。

Vue2.x的响应式使用了Object.defineProperty()，但是存在一些不足：
无法检测对象属性的新增删除
无法检测数组的变化：
a.通过索引改变数组的操作
b.数组长度发生了变化
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性（需要通过遍历这个对象）， 并返回这个对象（原对象&#x