1、概述 Vue在觀察到數據變化時並不是立即更新DOM，而是開啟一個隊列，並緩衝在同一個事件迴圈中發生所有數據的改變。 在緩衝時會去除重覆的數據，從而避免不必要的計算和DOM操作。 在下一個事件迴圈的tick中，Vue刷新隊列並執行實際（已去重）的工作。 $nextTick就是知道什麼時候DOM更新 ...
1、概述
Vue在觀察到數據變化時並不是立即更新DOM，而是開啟一個隊列，並緩衝在同一個事件迴圈中發生所有數據的改變。
在緩衝時會去除重覆的數據，從而避免不必要的計算和DOM操作。
在下一個事件迴圈的tick中，Vue刷新隊列並執行實際（已去重）的工作。
Vue是非同步更新DOM（非同步更新隊列）。
$nextTick就是知道什麼時候DOM更新完成的。
2、示例代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<div id="div" v-if="showDiv">
這是一段文本
</div>
<button @click="getText()">獲取div的內容</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
showDiv: false
},
methods: {
getText: function() {
this.showDiv = true;
this.$nextTick(function() {
var text = document.getElementById('div').innerHTML;
console.log(text)
});
}
}
})
</script>
</body>
</html>
