有创意的婚纱网站模板下载,商城建设网站策划,网站制作背景,公众号设计平台文章目录 $nextTick有什么作用#xff1f;一、NextTick是什么二、为什么要有nextTick#xff1f; $nextTick有什么作用#xff1f;
一、NextTick是什么
官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法#xff0c;获取更新后的… 文章目录 $nextTick有什么作用一、NextTick是什么二、为什么要有nextTick $nextTick有什么作用
一、NextTick是什么
官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取更新后的 DOM 什么意思呢
我们可以理解成Vue 在更新 DOM 时是异步执行的。当数据发生变化Vue将开启一个异步更新队列视图需要等队列中所有数据变化完成之后再统一进行更新
场景1
p refcontiner{{ msg }}/p
button clickchange()改变/buttondata() {return {msg: 你好}},methods: {change() {this.msg 呀console.log(this.$refs.continer.innerText)// 解决方法// this.$nextTick(() {// console.log(this.$refs.continer.innerText)// })}},这时候想获取页面最新的DOM节点却发现获取到的是旧值
console.log(this.$refs.continer.innerText) // 你好因为点击事件触发后vue会把对应方法内的任务执行完以后再进行页面渲染所以拿到的是老的值。
场景2 p v-if!isEdit姓名:{{ name }}/pp v-ifisEdit姓名: input typetext refipt v-modelname //pbr /button clickchange编辑/buttondata() {return {name: test,isEdit: false}},methods: {change() {this.isEdit true// 此时我想直接获取焦点,行不通//因为Dom还没更新的时候就已经执行了这行代码,所以获取不到焦点// this.$refs.ipt.focus()this.$nextTick(() {this.$refs.ipt.focus()})}},二、为什么要有nextTick
举个例子
{{num}}
for(let i0; i100000; i){num i
}如果没有 nextTick 更新机制那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)有了nextTick机制只需要更新一次所以nextTick本质是一种优化策略
