$nextTick()的理解
简单理解Vue中的nextTick 简单理解Vue中的nextTick
$nextTick()的理解 $nextTick()的理解
错误示例1：
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(菜鸟教程 - 学的不仅是技术，更是梦想！)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="showText" id="text">想要知道这段文字写的是什么？</div>
<button @click="clickMe">点我试试看就能知道那段隐藏的文字写的是什么了？</button>
</div>
<script>
new Vue({
el: '#app',
data: {
showText: false
},
methods: {
clickMe: function () {
this.showText = true;
var text = document.getElementById('text').innerHTML;
alert(text);
}
}
})
</script>
</body>
</html>
正确示例2：vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。
$nextTick是在下一次dom更新循环结束之后执行延迟回调，在修改数据之后使用这个方法，立即更新dom.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(菜鸟教程 - 学的不仅是技术，更是梦想！)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="showText" id="text">想要知道这段文字写的是什么？</div>
<button @click="clickMe">点我试试看就能知道那段隐藏的文字写的是什么了？</button>
</div>
<script>
new Vue({
el: '#app',
data: {
showText: false
},
methods: {
clickMe: function () {
this.showText = true;
this.$nextTick(function () {
var text = document.getElementById('text').innerHTML;
alert(text);
})
}
}
})
</script>
</body>
</html>
