image.png
    初次渲染

    1. 解析模版为render函数（或在开发环境一完成， vue-loader）
    2. 触发式响应， 监听data属性 getter、setter
    3. 执行render函数， 生成vnode， patch（elem, vnode）

    细节： data中的数据， 何种情况才触发getter

    1. <p> {{ message }} </p>
    2. data() {
    3.     return {
    4.       message: 'hello', // 会触发getter
    5.     name: 'Jack' // 不会触发getter， 因为模版中没有使用， 和视图没有关系
    6.   }
    7. }

    更新渲染

    • 修改data， 触发setter（初次渲染在getter中监听被监听的属性）
    • 再一次执行render函数， 生成newVnode
    • patch(vnode, newVnode)

    异步渲染 ($nextTick)

    • 汇总data修改， 一次性更新视图
    • 减少DOM操作次数， 提高性能