以下是學習筆記:
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>