vue中this.$nextTick()的用法
阿新 • • 發佈:2022-06-06
this.$nextTick 將回調延遲到下次DOM更新迴圈之後執行。在修改資料之後立即使用它,然後等待DOM更新。
this.$nextTick 跟全域性方法 vue.nextTick 一樣,不同的是,回撥的 this 自動繫結到呼叫它的例項上。
總的來說,假設我們更改了某個 dom 元素內部的文字,而這時候我們想直接列印這個更改之後的文字是需要 dom 更新之後才會實現的,就像我們把將要列印輸出的程式碼放在 setTimeout(fn, 0) 中
具體demo如下
<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(this.$refs.tar.innerText) // 初始值 } } } </script>
this.$nextTick這個方法作用是,當資料被修改後使用這個方法,會回撥獲取更新後的dom再渲染出來
methods:{ testClick() { this.content = '改變了的值' this.$nextTick(() => { // dom元素更新後執行,因此這裡能正確列印更改之後的值console.log(this.$refs.tar.innerText) // 改變了的值 }) } }
轉: https://blog.csdn.net/a654540233/article/details/107245152/