在使用vue的时候，不知道大家有没有遇到这种情况，明明对这个数据进行更改了，但是当我获取它的时候是上一次的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<button type="button" @click="change()" ref="btn">{
{content}}</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data(){
return{
content:"初始值111"
}
},
methods:{
change(){
this.content="改变了的值222"
console.log(this.$refs.btn.innerText)
}
}
})
</script>
</body>
</html>
当点击按钮了以后页面发生改变，但获取的值还是上一次的值
这时，如果想获取dom更新后的值就需要用到nextTick出场了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<button type="button" @click="change()" ref="btn">{
{content}}</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data(){
return{
content:"初始值111"
}
},
methods:{
change(){
this.content="改变了的值222"
this.$nextTick(()=>{
console.log(this.$refs.btn.innerText)
})
}
}
})
</script>
</body>
</html>
此时点击以后获取的值就是dom更新后的值了
这里有的小伙伴就要问了，为什么是this.$nextTick调用而不是用vue.nextTick调用呢？
因为this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。
在生命周期中created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在mounted()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<div ref="hello">
<h2>Hello World</h2>
<button type="button" @click="get" ref="btn">{
{content}}</button>
</div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data(){
return{
content:"初始值111"
}
},
methods:{
get(){
}
},
created(){
this.$nextTick(()=>{
console.log("111"); //5
console.log(this.$refs["hello"]);//6
})
console.log("222"); //1
console.log(this.$refs["hello"]); //2
},
mounted(){
console.log("333"); //3
console.log(this.$refs["hello"]); //4
this.$nextTick(()=>{
console.log("444"); //7
console.log(this.$refs["hello"]);//8
})
}
})
</script>
</body>
</html>
根据打印顺序我们可以看到，this.$nextTick()和setTimeout（）相似，属于异步任务，所以执行的顺序先执行1234同步任务，在执行5678异步任务。