以下是学习笔记:
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>