this.$nextTick()方法的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div id="app">       <h1 id="myh">{{msg}}</h1>       <button @click="change">点击</button>     </div>     <script>       var vm = new Vue({         el: '#app',         data: {           msg: 'hello'         },         methods: {           change() {               this.msg = 'itcast'             // console.log(document.getElementById('myh').innerText); // 如果直接这样打印，打印出来的结果不是我们想要的itcast，而是hello，因为this.msg = ‘itcast’ 它是异步的             this.$nextTick(() => {               console.log(document.getElementById('myh').innerText)             })           }         }       })     </script>

　　

作用是：等你页面dom中的数据渲染完之后，再执行回调函数中的方法。

vue中数据和dom渲染由于是异步的

this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

 

 

 

转：https://www.cnblogs.com/mushitianya/p/10510912.html

转：https://blog.csdn.net/gaoxin666/article/details/96143571