$nextTick
在Vue中，当修改后台数据时，即使后台数据需要更新页面，页面也不会马上更新DOM，而是会把这种修改推进待修改的队列，然后再统一对队列中的内容进行更新。这在实际开发中，会导致有时候，如果修改完后台的数据，马上对DOM属性或方法进行修改或触发，这种修改或触发会不生效，因为DOM还不是最新的。
Vue提供了一个API，可以使DOM更新为最新状态。
这个API是this.$nextTick(回调函数)。
在回调函数执行时，页面中的DOM已经是更新过的了。通过await this.$nextTick()，也可以使页面DOM完成更新，在这条语句之后页面中的DOM也是最新的了。
这种行为会引发控制台报错，因为找不到DOM。
使用$nextTick，先把修改推到页面上，再修改DOM：
或者
再点击按钮时，就能正常获取DOM，并且修改DOM样式：
**何时使用this.nextTick()：**当改变数据引起DOM变化，而代码又需要基于更新后的新DOM进行操作时，就需要使用this.nextTick()。
过渡与动画
基于CSS，有一个简单的使用动画的方法：
定义动画：
@keyframes 动画名{
from{
....
}
to{
...
}
}
调用：
animation: 动画名 持续时间 ...;
但Vue内部也提供了一个过渡方法，Transition。当需要给某些内容添加过渡时，用Transition把相应的标签包起来就可以。
Transition只在v-if和v-show切换时触发。当标签的v-if或v-show从false切换为true时，属于激活/进入状态，当v-if或v-show从true切换为false时，属于离开状态。
Transition标签在解析时不会留下来显示在html中，它只是给Vue解析用的。
Transition对应的样式，有具体的名字，不能随意写：
.v-enter{} 进入的起点，对应元素初始状态下的样式。
.v-enter-to{} 进入的终点，对应元素进入的动画完成时的样式。
.v-leave{} 离开的起点
.v-leave-to{} 离开的终点
.v-enter-active{} 进入的过程中执行的效果
.v-leave-active{} 离开的过程中执行的效果
一般来说，进入的起点和离开的终点样式是一样，而进入的终点和离开的起点是一样，因此写样式时一般写 .v-enter, .v-leave-to{}和.v-enter-to, v-leave{}。
如果需要指定样式需要应用的transition属性，指定运行多久、渐入渐出效果等，可以把这个逻辑放在.v-enter-active{}和.v-leave-active{}中。
html
<template>
<div>
<h2 v-for="data in listData" :key="data.id">
<Transition>
<div :ref="data.id" v-show="isShow">
{{ data.name }}--{{ data.age }}
</div>
</Transition>
</h2>
<button @click="addAndChange">add and change</button>
</div>
</template>
<style scoped>
.v-enter, .v-leave-to{
transform: translateX(-100%);
}
.v-enter-to, .v-leave{
transform: translateX(0);
}
.v-enter-active, .v-leave-active{
transition: 2s linear;
}
h2{
background-color: aqua;
}
</style>
<script>
export default {
data() {
return {
listData: [
{ name: 'cat', age: 1, id: '001' },
{ name: 'dog', age: 2, id: '002' },
],
isShow:true,
}
},
methods: {
addAndChange() {
this.isShow = !this.isShow;
}
}
}
</script>可以一开始就执行一次进入激活时的样式，通过appear属性控制，当绑定true时，表示一开始就激活一次，:appear="true"，也可以直接写appear，和:appear="true"的效果是一样的。
可以给过渡起名字，在Transition上使用name属性命名，对应的样式需要更名为.name名-enter-active{}和.name名-leave-active{}。在需要定义多个过渡，且每个过渡的样式效果不一样时，就可以给transition指定name。
v-enter和v-leave在CSS中加入和删除的时间很短暂，一般很难捕捉到。
Transition标签只能包裹一个在一个大元素外面，如果想要给多个标签设置同样的渐变样式，需要使用Transition-group标签，并且内部每个标签都要有自己的key值。
Vue中一些第三方动态库，比如Animate.css等，在开发时也可以使用第三方库实现动画效果。可以通过属性给transition指定进入动画，设置enter-active-class="类名"；也可以通过属性给transition给指定离开时的动画，设置leave-active-class="类名"。可以通过这些数据调用第三方库。
Animate.css | 一个跨浏览器的 CSS 动画库。
按步骤安装和引入：
使用name、enter-active-class、leave-active-class绑定第三方库：
把第三方库提供的class赋给name。
把想应用的进入和离开动画名赋给enter-active-class和leave-active-class。
