this.$nextTick()的使用场景
一、用途应用场景:需要在视图更新之后,基于新的视图进行操作。this.$nextTick()方法主要是用在数据改变,dom改变应用场景中。vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异...
一、用途
应用场景:需要在视图更新之后,基于新的视图进行操作。
this.$nextTick()
方法主要是用在数据改变,dom
改变应用场景中。vue中数据和dom
渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()
的回调函数中。created()
中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,此时this.$nextTick()
就会被大量使用,而与created()
对应的是mounted()
的钩子函数则是在dom完全渲染后才开始渲染数据,所以在mounted()
中操作dom基本不会存在渲染问题。
二、官方说明:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
三、原理:
this.$nextTick()
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick
一样,不同的是回调的 this 自动绑定到调用它的实例上。
假设我们更改了某个dom
元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn, 0)
中;
异步说明
事件循环说明
实例
(1)实例一
<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
}
},
mounted() {
console.log(333);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(444);
console.log(this.$refs['hello']);
});
},
created() {
console.log(111);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(222);
console.log(this.$refs['hello']);
});
}
}
</script>
可以根据打印的顺序看到,在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM
操作并无作用,而在created()里使用this.$nextTick()
可以等待dom生成以后再来获取dom对象
(1)实例二
<template>
<section>
<h1 ref="hello">{{ value }}</h1>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
value: 'Hello World ~'
};
},
methods: {
get() {
this.value = '你好啊';
console.log(this.$refs['hello'].innerText);
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});
}
},
mounted() {
},
created() {
}
}
</script>
根据上面的例子可以看出,在方法里直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值,而通过this.$nextTick()
获取到的值为dom更新之后的值
更多推荐
所有评论(0)