数据双向绑定
new Vue()发生了什么
- 初始化
- 响应式流程
watch 和 computed原理
Vue的数据为什么频繁变化但只会更新一次
this.$nextTick
MVVM vs MVC
virtual dom 与 dom diff
Vue能做哪些性能优化？
状态管理
vue router
参考资料

数据双向绑定

双向绑定的实现：数据劫持、发布订阅
vue2中关于数组和对象，数据劫持时有写什么特殊处理吗？==> 重写数组方法
defineProperty 和 proxy 有什么区别？==> proxy学习笔记
vue的数据频繁变化但是只更新一次？===> [点我跳转**](#enJyB)
vue-响应式base

new Vue()发生了什么

vue框架的整个周期，比如vue的初始化，发生了什么？
new Vue发生了什么，各个生命周期的函数如何被触发的
生命周期函数
父子组件挂载的时候，生命周期顺序？
.vue文件开始到DOM渲染到页面上，Vue做了哪些工作
vue的模板解析，是如何进行的？
如何形成AST？
render函数的生成？
什么是依赖收集？
什么是patch？

vnode -> DOM：把虚拟DOM转换成真正的DOM节点

初始化

1、创建Vue实例对象
2、init过程
3、初始化后，调用$mount方法对Vue实例进行挂载
3.1模板编译
render function生成： template -> render function
template 字符串编译步骤如下：

parse正则解析template字符串形成AST（抽象语法树，是源代码的抽象语法结构的树状表现形式）
optimize标记静态节点跳过diff算法（diff算法是逐层进行比对，只有同层级的节点进行比对，因此时间的复杂度只有O(n)
generate将AST转化成render function字符串

mountComponent: 编译成render function 后，调用$mount的mountComponent方法

执行beforeMount钩子函数
再执行核心逻辑：实例化一个渲染Watcher，在它的回调函数（初始化的时候执行，以及组件实例中监测到数据发生变化时执行）中调用updateComponent方法

（此方法调用render方法生成虚拟Node，最终调用update方法更新DOM）
3.2渲染
render function -> 虚拟Node render方法的第一个参数是createElement
3.3更新update
update方法调用pacth方法把虚拟DOM转换成真正的DOM节点

响应式流程

https://www.yuque.com/u2728/work-makes-me-happy/pcu1dv#wlhyh

在初始化流程中的编译阶段，当render function被渲染的时候，会读取Vue实例中和视图相关的响应式数据
=> 触发getter函数进行依赖收集: 将观察者Watcher对象存放到当前闭包的订阅者Dep的subs中

可以发现只要视图中添加监听事件，就会自动纳入依赖收集以及该数据对应变化的 update函数

watch 和 computed原理

computed、watcher

Vue的数据为什么频繁变化但只会更新一次

小提示：这里问的是Vue源码对于视图更新的优化。我这里的回答是乱糟糟的，希望有同学能够给出一个精准并且简短的回答。
Vue是异步更新Dom的，Dom的更新放在下一个宏任务或者当前宏任务的末尾（微任务）中进行执行
由于VUE的数据驱动视图更新是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

脑海中过一下vue里data→view的过程：

vue中从修改 data 到 UI 更新的过程（注意顺序）：

修改 data 后，Vue 的 watcher 收到通知，压入 MicroTask Queue；
你立即调用 Vue.nextTick（企图获得data改变后的最新dom），Callback压入 MicroTask Queue；
依次执行所有 MicroTask

data 的修改会被更新到 DOM 上。请注意，此时浏览器并没有将这些变更渲染到屏幕上，但是，DOM 已经更新了！（dom的修改是同步的但是浏览器的dom树绘制到屏幕显示是异步的！
执行 nexttick的Callback，此时拿到的 DOM 已经是新的了
也可以在 nextTick 的 Callback 中继续修改 data，那么使用 MicroTask 能够确保你的这个更新在本轮 Event Loop 就能完成，直接上屏。而如果使用类似 setTimeout 那样的机制来实现 nextTick 的话，这个修改引发的 UI Render 必须等到至少下一轮 Event Loop 中执行。

浏览器渲染 DOM 更新到屏幕上。