$nextTick的使用场景介绍

$nextTick使用

Vue更新DOM-异步的

目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值

components/Move.vue - 继续新增第三套代码

<template><div><p>1. 获取原生DOM元素</p><h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1><p>2. 获取组件对象 - 可调用组件内一切</p><Demo ref="de"></Demo><p>3. vue更新DOM是异步的</p><p ref="myP">{{ count }}</p><button @click="btn">点击count+1, 马上提取p标签内容</button></div>
</template><script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM异步// 解决: this.$nextTick()// 过程: DOM更新完会挨个触发$nextTick里的函数体this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}}
}
</script>

总结: 因为DOM更新是异步的

3.3 $nextTick使用场景

目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失


components/Tick.vue

<template><div><input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow"><button v-else @click="btn">点击我进行搜索</button></div>
</template><script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {data(){return {isShow: false}},methods: {async btn(){this.isShow = true;// this.$refs.myInp.focus()// 原因: data变化更新DOM是异步的// 输入框还没有挂载到真实DOM上// 解决:// this.$nextTick(() => {//     this.$refs.myInp.focus()// })// 扩展: await取代回调函数// $nextTick()原地返回Promise对象await this.$nextTick()this.$refs.myInp.focus()}}
}
</script>