2/4 关于 Vue.js 中 this.$nextTick 的个人简单解释

　　学习了快两个星期了今天开始系统地做小项目了

　　但是遇到一个问题那就是 $nextTick 到底是个啥

　　在网上找到了一个参考代码，然后自己敲了一下之后才明白

　　　　" updated 生命周期函数中的函数约等于 this.$nextTick( function ( ) { } ) "

　　这个是我的浅显的理解

　　具体参考别人的代码

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <div ref="msgDiv">{{msg}}</div>
13         <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
14         <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
15         <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
16         <button @click="changeMsg">
17             Change the Message
18         </button>
19     </div>
20 </body>
21 
22 <script>
23     var vm = new Vue({
24         el: '#app',
25         data() {
26             return {
27                 msg: 'Hello Vue.',
28                 msg1: '',
29                 msg2: '',
30                 msg3: ''
31             }
32         },
33         updated () {
34             // this.msg2 = this.$refs.msgDiv.innerHTML 
35         },
36         methods: {
37             changeMsg() {
38                 this.msg1 = this.$refs.msgDiv.innerHTML
39                 this.$nextTick(() => {
40                     this.msg2 = this.$refs.msgDiv.innerHTML
41                 })
42                 this.msg3 = this.$refs.msgDiv.innerHTML
43             }
44         }
45     });
46 </script>
47 
48 </html>