vue的整个实现流程

vue实现流程有以下4个步骤

• 解析模板（本质是字符串）成render函数
• 响应式开始监听
• 首次显然，显示页面，绑定依赖
• data属性变化，触发rerender

1. 解析模板成render函数

模板如下：

解析成render函数（源码中使用code.render）

格式化后如下：this为vue实例,_c为实例的函数，对应createElement,返回VNode

收缩后如下：

模板中的所有信息被render函数包含，模板中用到的data中的属性，都变成了JS变量，模板中的v-model v-for v-on都变成了JS逻辑，render函数返回VNode.

2. 解析模板成render函数
使用Object.defineProperty将data的属性代理到vm上。

3.首次渲染，显示页面，绑定依赖

1.初次渲染，执行updateComponent，执行vm._render()，执行render函数，会访问到vm.list vm.title，会被响应式的get方法监听到。
2. 执行updateComponent,执行vdom的patch方法，将VNode渲染成DOM，初次渲染完成。

监听get的原因，是为了避免不必要的重复渲染，data中只有触发get的才会被使用到。

4. data属性变化，触发rerender

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