vue.js中 this.$nextTick()的使用

this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来

template>
    <button ref="tar" type="button" name="button" @click="testClick">{{content}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                content: '初始值'
            }
        }
     methods: {
       testClick(){
         this.content = '改变了的值'
         // 这时候直接打印的话,由于dom元素还没更新,因此打印出来的还是未改变之前的值
         console.log(that.$refs.tar.innerText) // 初始值
       }
     }
    }
</script>


methods:{
    testClick() {
        this.content = '改变了的值'
        this.$nextTick(() => {
            // dom元素更新后执行,因此这里能正确打印更改之后的值
            console.log(that.$refs.tar.innerText) // 改变了的值
        })
    }
}

  

上一篇:杂记 -- 关于ref、kepp-alive、nextTick


下一篇:宏任务微任务