vue 中如何解析模板
- 模板：字符串，有逻辑，嵌入 JS 变量……
- 模板必须转换为 JS 代码（有逻辑、渲染 html、JS 变量）
- render函数是什么样子的
- render 函数执行是返回 vnode
- updateComponent
vue 的整个实现流程
第一步：解析模板成 render 函数
- with 的用法
- 模板中的所有信息都被 render 函数包含
- 模板中用到的 data 中的属性，都变成了 JS 变量
- 模板中的 v-model v-for v-on 都变成了 JS 逻辑
- render 函数返回 vnode
第二步：响应式开始监听
- Object.defineProperty
- 将 data 的属性代理到 vm 上
第三步：首次渲染，显示页面，且绑定依赖
- 初次渲染，执行 updateComponent，执行 vm._render()
- 执行 render 函数，会访问到 vm.list vm.title
- 会被响应式的 get 方法监听到(下面会讲)
- 执行 updateComponent ，会走到 vdom 的 patch 方法
- patch 将 vnode 渲染成 DOM ，初次渲染完成
为何要监听 get ，直接监听 set 不行吗？
data 中有很多属性，有些被用到，有些可能不被用到
被用到的会走到 get ，不被用到的不会走到 get
未走到 get 中的属性，set 的时候我们也无需关心
避免不必要的重复渲染
第四步：data 属性变化，触发 rerender
- 修改属性，被响应式的 set 监听到
- set 中执行 updateComponent
- updateComponent 重新执行
vm._render() 生成的 vnode 和 prevVnode ，通过 patch 进行对比
渲染到 html 中