目次
1. 学んだことの復習
- レスポンシブ: listen データ属性 getter setter (配列を含む)
- テンプレートのコンパイル: テンプレートからレンダリング関数、次に vnode へ
- vdom：patch(elem, vnode) 和 patch(vnode, newVnode)
2. コンポーネントのレンダリング/更新プロセス
- 初期レンダリング パス
- 更新プロセス
- 非同期レンダリング
2.1 初期レンダリングプロセス
- テンプレートをレンダリング関数として解析します (または、vue-loader などの開発環境で完了しています)。
- トリガー応答、リッスン データ属性ゲッター セッター
- render 関数を実行して vnode, patch(elem, vnode) を生成する
render 関数を実行するとゲッターがトリガーされます
<p>{
{ message }}</p>
<script>
export default {
data() {
return {
message: 'hello', // 会触发 getter
city: '北京' // 不会触发 getter，因为模板没用到，即和视图没关系，改变时，也不会触发setter
}
}
}
</script>2.2 アップデートの流れ
- データの変更、setter のトリガー (以前は getter で監視されていました)
- render 関数を再実行して newVnode を生成する
- patch(vnode, newVnode)
2.3 非同期レンダリング
- $nextTick を確認
- データの変更を要約し、一度にビューを更新します
- DOM 操作の数を減らし、パフォーマンスを向上させる
<script>
export default {
name: 'app',
data() {
return {
list: ['a', 'b', 'c']
}
},
methods: {
addItem() {
this.list.push(`${Date.now()}`)
this.list.push(`${Date.now()}`)
this.list.push(`${Date.now()}`)
// 1. 异步渲染，$nextTick 待 DOM 渲染完再回调
// 2. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
this.$nextTick(() => {
// 获取 DOM 元素
const ulElem = this.$refs.ul1
// eslint-disable-next-line
console.log( ulElem.childNodes.length )
})
}
}
}
</script>3. まとめ
- レンダリングと応答性の関係
- レンダリングとテンプレート コンパイルの関係
- レンダリングと vdom の関係