最近在自学 Vue,记录一下个人的理解。
1. 区分
首先说明 $nextTick()
与 nextTick()
的作用都是一样的,只不过nextTick()
是全局API,而$nextTick()
是绑定到组件实例上的API,并且回调函数(该方法需要传入的参数)中的 this
自动绑定到调用它的实例上。
nextTick()
this.$nextTick()
2. 使用原因
Vue 中更新 DOM 是异步的, 如果操作了响应式数据后,与其绑定的DOM元素并不会立即更新。所以如果需要对更新数据后的DOM元素进行操作,需要放在一个能保证DOM元素已经更新了的地方,这时nextTick便派上用场了。
看一个Vue官网的例子:
<script>
import {
nextTick } from 'vue'
export default {
data() {
return {
count: 0
}
},
methods: