Vue原理「十四」-- 组件渲染过程***

1.初次渲染过程

解析模板为render函数（或在开发环境中已完成，vue-loader）
触发响应式，监听data属性的getter setter（render函数需要通过getter先获取模板使用的数据）
执行render函数，生成vnode, patch(elem,vnode)

2.更新过程

修改data，触发setter(此前getter中已被监听)
重新执行render函数，生成newVnode
patch(vnode,newVnode)，patch的diff算法会算出最小差异并更新到DOM上。

• 执行 render函数时会 Touch(触发) getter; 生成依赖，并watcher（观察）起来，
• 修改data时，触发setter,通知 watcher重新触发render函数，重新渲染。

3.异步渲染

更新 DOM 时是异步执行的,DOM不会立刻渲染，获取不到最新的DOM节点

add() {
this.list.push(Date.now());
this.list.push(Date.now());
this.list.push(Date.now());

const ulElem = this.$refs.ul1; //获取ul的DOM节点
console.log(ulElem.childNodes.length); //此时data改变之后

使用 $nextTick 会在DOM渲染之后被触发，以获取最新DOM节点

this.$nextTick(() => {
const ulElem = this.$refs.ul1; //获取ul的DOM节点
console.log(ulElem.childNodes.length); //$nextTick会在DOM渲染之后被触发,此时已经是最新的DOM节点
});

1. 异步渲染，$nextTick 待DOM渲染完再回调
2. 页面渲染是，会将data的修改做整合，多次data修改只会渲染一次