this.$nextTick
第一种情况:
页面改变了,但是数据没有改变,我们使用的是this.$nextTick,官网是这样解释的:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。我们通过案例来了解:
<template>
<div id="app">
<button @click="change">按钮</button>
<test ref="test" @change="change" />
</div>
</template>
<script>
import test from "./components/test";
export default {
name: "App",
components: {
test,
},
methods: {
change() {
this.$refs.test.change()
},
},
};
</script>
<template>
<div>
<h1 ref="name">{{name}}</h1>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
name: "杨雨",
};
},
methods: {
change() {
this.name = "杨雪";
console.log(this.$refs.name.innerHTML)
},
},
};
当我们点击按钮,我们会触发子组件的change事件,修改name,同时我们输出一下此时子组件dom上渲染的name,由于此时dom还没更新,所以我们第一次拿到的结果是这样的:
效果:页面数据虽然改变了,但是拿到的dom数据还没改变,所以我们需要将输出延迟到dom重新渲染之后,也就是将回调延迟到下次DOM更新循环之后执行,解决办法:
methods: {
change() {
this.name = "杨雪";
this.$nextTick(()=>{
console.log(this.$refs.name.innerHTML)
})
},
},
效果:
我记得我当时用到这个是在整组件库时,switch组件中用到的,好像在整element的table表格时,传数据也用到了,当时就是拿到的数据总是第二次穿的数据,包括现在我遇到这种情况,先整一个this.$nextTick试试,但是下面这个情况我用这种方法没有解决
setTimeout
第二种情况: