1、使用nextTick的时机
vue更新数据是异步的，(也就是说你执行的DOM更新不会立马执行)，$nextTick(()=>{}) 与DOM相关的操作写在该函数回调中，确保DOM已经渲染
在create()钩子函数执行的时候，DOM其实并没有做任何的渲染，所以此时进行DOM操作，没有任何作用，在create()钩子函数进行的DOM操作一定要放在Vue.$nextTick()的回调函数中
mounted()钩子函数，因为该钩子函数执行的时候，所以的DOM都已经执行完成，所以可以直接进行操作
2、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">点击</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
showDiv: false
},
methods: {
// getText() {
// this.showDiv = true;
// var text = document.getElementById('div');
// console.log(text); //得到是空值，因为此时dom并没有重新渲染，所以div里没有值
// },
getText() {
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById('div').innerHTML;
console.log(text); //这是一段文本
})
}
},
})
</script>
</html>
