什么是Vue.nextTick()
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
比如：dom节点默认有个值testMsg，点击修改testMsg，通过refs获取的还是以前的值，只有当dom更新渲染后，再获取testMsg才变成修改后的值
实例：
<template>
<div class="hello">
<div>
<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
}
}
}
</script>使用this.$nextTick()
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
that.$nextTick(function(){
console.log(that.$refs.aa.innerText); //输出：修改后的值
});
}
}注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
什么时候需要用的Vue.nextTick()
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
vue中提供了$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">
<div id="box">{{ msg }}</div>
<button @click="btnChangeMsg">改数据</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "Hello World"
},
methods: {
btnChangeMsg() {
// 在vue中数据向视图上进行更新的操作，是异步的
this.msg = "Hello LYH";
// 异步的就意味着，在代码中更改完数据之后，直接去访问页面中的元素中的内容，还是老数据
// console.log(document.getElementById("box").innerHTML)；打印出来还是老数据
// $nextTick回调函数，能够确保我们获取到的页面中的内容，都是最新的！
this.$nextTick(function() {
console.log("这个函数，会在Vue将数据更新到视图之后，执行");
console.log(document.getElementById("box").innerHTML);
});
}
}
});
</script>
</body>
</html>