vue 的整个实现流程

• 第一步：解析模板成 render 函数
• 第二步：响应式开始监听
• 第三步：首次渲染，显示页面，且绑定依赖
• 第四步：data 属性变化，触发 rerender

第一步：解析模板成 render 函数

• 模板中的所有信息都被 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 属性变化

• 修改属性，被响应式的 set 监听到
• set中执行 updateComponent
• updateComponent 重新执行 vm._render()
• 生成的 vnode 和 prevVnode ，通过 patch进行对比
• 渲染到 html 中