轉自：https://www.cnblogs.com/zhou-135/p/11601039.html
以下是學習筆記:
Vue中DOM更新是異步的,現在暫時還未有體會到這個的用處,並且this.$nextTick()也不是很理解,暫且先記下.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 @click="updateCount" id="title">{{ count }}</h1> //這裏指的是這個DOM--h1節點
</div>
<script src="./vue.js"></script>
<script>
// Vue中的DOM更新是異步的
const vm = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
// updateCount() { }
updateCount: function () {
for (var i = 0; i < 1000; i++) {
this.count += 1 ////如果DOM更新是同步的,那麼在這裏,h1節點會更新1000次,這樣做顯然是浪費性能的
}
console.log(this.count) //結果是1001
console.log('當前H1中的內容:', document.getElementById('title').innerText)//結果是1
var that = this
// 這個方法用來獲取DOM更新後的內容
this.$nextTick(function () {
console.log('更新後: ', that.count)//1001
console.log('更新後 H1中的內容:', document.getElementById('title').innerText)//1001
結果是1
1 }) } } }) </script> </body> </html>