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函数，重新渲染。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

3.异步渲染

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

更新 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修改只会渲染一次