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