一、Vue响应式原理
1、什么叫响应式：
1、组件data的数据一旦变化，立刻出发视图的更新
2、实现数据驱动视图的第一步
2、实现响应式的核心API：Object.defineProperty vue3.0利用 proxy实现响应式
3、Object.defineProperty 基础用法（通过get set 用法来实现）--能讲到这里就OK了
4、Object.defineProperty 实现响应式
1、监听对象、监听数组
2、复杂对象，深度监听
3、几个缺点
二、虚拟DOM和DIFF算法
虚拟DOM也称VDOM
VDOM是Vue react的基石；Vue和react 是数据驱动视图，那么如何有效操控DOM操作，VDOM就出来了；
VDOM原理：因为js的执行速度是非常快的，所以VDOM就是用JS模拟DOM结构，计算出最小的变更（这个对比算法就是DIFF），操作DOM；
DOM结构可以用JSON模拟出来，类似XML；下图需要能写出来
学习VDOM利用 snabbdom
1、DIFF算法例如 v-for 的key为什么必须要；就讲讲DIFF算法
DIFF比较算法
1、只比较同一层级，不跨级比较
2、tag不相同，则这接删掉重建，不在深度比较
3、tag和key，两者都相同，则认为是相同节点，不在深度比较
DIFF源码的核心
1、pathVnode
2、addVnodes removeVnodes
3、updateChildren(key的重要性)
三、模板编译(通过考察”组件渲染和更新过程“)
1、什么叫模板编译：
(a)、Vue模板不是HTML；直接浏览器打开是不识别的了；模板是有指令，插值、JS表达式、能判断、循环
(b)、HTML是标签语言，只有JS才能实现判断、循环
(c)、因此，模板一定是转换为某种JS代码，即编译模板
2、模板编译过程
(a)、首先vue template complier将模板编译为render函数
(b)、执行 rendera 函数生成 vnode
(c)、vnode就是虚拟DOM结构，然后编译（vue组件可以用render代替template，react一直用的都是render）
3、一个组件渲染到页面，修改DATA出发更新（数据驱动视图），背后原理，需要掌握什么
(a)、首先响应式，通过get、set 监听数据
(b)、模板编译，生成 vnode
(c)、vnode的执行
四、VUE的渲染过程
1、初次渲染
(a)、解析模板为render函数（在开发环境已经完成，v-loader）
(b)、出发响应式，监听data 属性 getter setter
(c)、执行render函数，生成 vnode ，patch渲染
2、数据更新
(a)、修改data，触发setter
(b)、重新生成render函数，生成newVnode
(c)、patch （vnode、newVnode，diff算法计算）
3、异步渲染
(a)、汇总data的修改，一次性更新视图
(b)、减少DOM操作次数，提高性能
五、前端路由
hash的特定
1、hash 变化会触发网页跳转，即浏览器的前进、后退
2、hash 变化不会刷新页面
3、hash 永远不会提交到 server 端
history
1、用Url规范的路由，但跳转不刷新页面
2、history.pushState
3、需要后端支持
六、总结一点面试题
1、为什么组件data必须是一个函数
A：必须是一个函数。因为 .vue 组件编译完之后 其实是一个类，每次使用的时候都是类实例化，所以data必须是一个函数；
2、ajax请求放在哪个声明周期
A: 放在mounted里面，因为这里页面已经渲染完成，并且JS是单线程的，ajax是异步获取数据，所以放在这里
3、何时需要使用 beforeDestory
A、解除自定义事件 event.$off
B、清除定时器
C、解绑自定义的 DOM 事件，入 window scroll等
4、vuex中action 和 mutation 有何区别
A、action 中处理异步，mutation 不可以
B、mutation做原子操作
C、action可以整合多个mutation
5、vnode描述一个DOM结构
6、Vue常见性能优化
A、合理使用v-show v-if
B、合理使用 computed
C、v-for加key，以及避免 和 v-if 同时使用
D、自定义事件、DOM事件及时销毁
E、合理使用异步组件
F、合理使用keep-alive
G、预编译 vueloader