重要的API
一、nextTick()
1、寫法? Vue.$nextTick()或者this.$nextTick()
原因：
set操作代碼是同步的，但是代碼背后的行為是異步的。set操作修改聲明式變量，觸發re-render生成新的虛擬DOM，進一步執行diff運算，找到臟節點集合，交給Vue背后的更新隊列去執行循環更新。
什么是nextTick？
在更新隊列中每一個更新任務都是一個更新單元，nextTick表示下一個更新單元（更新周期）。
例子1：
代碼是同步的，任務是異步的，打印出來肯定不是3
<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 獲取節點文本const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)}}})app.$mount('#app')</script></body>
</html>
頁面顯示3：
但是控制臺打印1：
例子2：
用nextTick修改成同步的
<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 獲取節點文本this.$nextTick(()=>{const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)})}}})app.$mount('#app')</script></body>
</html>
2、nextTick的作用
當我們set操作data（更新DOM），你希望訪問這個DOM的最新狀態，使用nextTick。（操作完DOM后，馬上對它做操作）
3、面試題
this.num++或者this改變聲明式變量是同步還是異步的？
代碼是同步，但是背后有虛擬DOM生成，有遞歸運算，有更新隊列是異步的。
4、nextTick()在某種程度（場景）下，可以使用updated()來替代
二、forceUpdate()
1、寫法? this.$forceUpdate()
原因：
Vue響應式是有缺陷的。在復雜的Vue應用中，有些復雜的引用數據類型，當你set操作這些復雜的引用數據類型時，視圖不更新。
解決方案：
當你set操作完成后，立即調用this.$forceUpdate()強制更新。（強制re-render）
有時候，this.$forceUpdate()也無法解決上述問題，對set操作的變量進行一次深復制。
?
 A. Boboniu Chats with Du)
：創建內觀時裝備偏移問題)
)
