使用Vue.nextTick()是什么?
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;
nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数
<template> <div class="hello"> <h1 id="nextTick" ref="hello">hello boy!</h1> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'HelloWorld' } }, created(){ let that=this; that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.hello.innerHTML="hello girl!"; //写入到DOM元素 }); }, } </script> <style scoped> h1 { font-weight: normal; } </style>