Vuex
vuex采用MVC模式中的model层，规定所有的数据必须通过 action -> mutation ->state 这个流程进行状态改变，再结合vue的数据视图双向绑定实现页面的更新。
- vuex 一个集中的数据存储状态管理工具 (数据集中管理 数据共享)
- state 就是数据源存放地 （数据是响应式）
- getters 相当于 store 的计算属性(对 state二次加工)
- mutations 修改state（同步更新数据 Reducer)
- actionis 异步操作数据，但是通过 mutations 来操作，用 this.$store.dispatch 来触发
- module
actions 和 mutations （Reducer） 有什么区别
mutation 必须是同步代码
action 可包含多个 mutation，可包含异步代码。
你知道vue中key的作用和工作原理吗？说说你对它的理解
源码中找答案：src\core\vdom\patch.js - updateChildren()
key的作用主要是为了高效的更新虚拟DOM，
其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，
使得整个patch过程更加高效，减少DOM操 作量，提高性能。
vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
你怎么理解vue中的diff算法？
diff算法：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上
vue 2.x中每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。
vue中diff执行的时刻是组件实例执行其更新函数
它会新旧虚拟DOM作对比，此过程称为patch。
diff过程整体遵循深度优先、同层比较的策略；
两个节点之间比较会根据它们是否拥有子节点或者文 本节点做不同操作；
如果 没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；
借助key通常可以非 常精确找到相同节点，因此整个patch过程非常高效
MVVM
ViewModel
将数据变化转换为视图更新
通过事件监听响应View中用户交互修改Model中数据。
这样在ViewModel中就减少了大量DOM操作代码。
MVVM在保持View和Model松耦合的同时，还减少了维护它们关系的代码
Vue-router 中hash模式和history模式的区别
hash模式
hash 带 # 号
hash模式其实是利用了window.onhashchange事件
支持低版本浏览器和IE浏览器
hash模式下，build之后本地 index.html 打开正常
history模式
HTML5的新推出 的 API
利用history.pushState() 和 history.replaceState()事件
history.back() 等价于 history.go(-1) 【相当于后退】
history.forward() 则等价于 history.go(1) 【相当于前进】
history模式下，build之后本地 index.html 打开是无效的
### history模式需要 借助 ng 处理 或者 后台对应的配置
location / {
try_files $uri $uri/ /index.html;
}
v-model的实现原理
model层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新
通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值
Vue的父子组件生命周期钩子函数执行顺序
-
加载渲染过程
- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
-
子组件更新过程
- 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
-
销毁过程
- 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
Vue 模板编译原理
Vue 的编译过程就是将 template 转化为 render 函数的过程，分为以下三步：
第一步 是将 模板字符串转换成 element ASTS（解析器）
第二步 是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）
第三步 是 使用element ASTS生成 render 函数代码字符串（代码生成器）
插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，
vue响应式理解
1. Object.defineProperty 数据劫持
1. 使用 getter 收集依赖 ，setter 通知 watcher派发更新。
1. watcher 发布订阅模式
参考
