Vue nextTick

vm.$nextTick( callback] )

updated

nextTick

1.作用：

1. 数据改变

   并且

   dom

   更新之后执行的回调函数
2. 执行时机：将回调延迟到下次 DOM 更新循环之后执行。
3. 使用方法：在修改数据之后立即使用它，然后等待 DOM 更新。

new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})

demo

<template>
<div>
<h2>update的缺点和解决方案nextTick</h2>
<input type = "text" v-model = "msg"/>
<br/>
<input type = "text" v-model = "info"/>
<h2 ref = "info">info:{{ info }}</h2>
<button @click = "changeInfo">修改info</button>
</div>
</template>

<script>
export default {
updated() {
// 任何数据更新都会触发updated
// 执行频率很高
// 开发中 用的不是很多
// console.log('执行啦!')
},
data() {
return {
msg: '感觉自己萌萌哒!',
info: '阿珍爱上了阿强',
};
},
methods: {
changeInfo() {
// 修改数据
this.info = '在一个没有星星的夜晚!';
// 页面还没更新
console.log('innerHTML:', this.$refs.info.innerHTML);
// 数据改变, dom更新完毕
this.$nextTick(() => {
// 绑定this，更新之后的DOM
console.log('nextTick-innerHTML:', this.$refs.info.innerHTML);
});
},
},
};
</script>

<style></style>