Vue 中 $nextTick 的作用
阿新 • • 發佈：2018-12-22
在DOM改變之後， $nextTick執行的方法裡面回撥 ，可以獲取更新後的DOM，然後再做其他操作。。
html： <body> <div id="app"> <div ref = "box">{{msg}}</div> <div>msg1的值是：{{msg1}}</div> <div>msg2的值是：{{msg2}}</div> <button @click="change">點我改變msg的值</button> </div> </body> js： <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'hello', msg1:'', msg2:'', }, methods:{ change(){ this.msg = "Hello world" this.msg1=this.$refs.box.innerHTML; this.$nextTick(() => { this.msg2 = this.$refs.box.innerHTML; }) } } }) </script>
執行結果如下：
初始值： 改變後：
| hello | Hello world |
| msg1的值是： | msg1的值是：hello |
| msg2的值是： | msg2的值是：Hello world |