Vue学习第17天——netTick()的原理及使用
目录
- 一、nextTick
- 1、定义
- 2、理解
- 3、应用场景
- 4、语法
- 二、Vue更新DOM机制
- 1、官方说明
- 2、更新DOM机制理解
- 3、nextTick的作用
- 三、案例练习
- 四、总结
- 1、为什么使用nextTick
- 2、Vue实现nextTick的原理
一、nextTick
1、定义
等待下一次 DOM 更新刷新的工具方法
2、理解
DOM节点更新完毕之后再执行回调函数
3、应用场景
需要在视图更新之后，基于新的视图进行操作（eg：先在页面中渲染出输入框，然后输入框自动获取焦点）
4、语法
this.$nextTick(回调函数)
二、Vue更新DOM机制
1、官方说明
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
2、更新DOM机制理解
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，Vue 在更新 DOM 时是异步执行的。
只要侦听到数据变化，Vue 将开启一个队列，然后把同一事件循环中观察数据变化的watcher推送到这个队列里。
如果watcher被触发多次，只会被推送到队列一次（这种缓冲行为可以有效的去除重复数据造成的不必要的计算和DOM更新）。然后在下一个事件循环开始时才会执行必要的DOM更新，即Vue 刷新队列并执行工作。
3、nextTick的作用
为了在数据变化之后就实现Vue更新DOM ，可以在数据变化之后立即调用 Vue.nextTick(回调函数) 。这样回调函数在 DOM 更新完成后就会调用。
执行顺序：当页面上的元素被重新渲染之后，才会执行指定回调函数中的代码
三、案例练习
需求：点击修改按钮时，页面会出现一个input输入框，并且自动获取焦点
<template>
<div>
<p>nextTick的使用</p>
<button @click="showIpt">点击按钮展示输入框自动获取焦点</button><br/>
<input type="text" v-show="isShow" ref="ipt" value="请输入内容">
</div>
</template>
<script>
export default {
name:"Student",
data(){
return {
isShow:false,
}
},
methods:{
showIpt(){
this.isShow=true;
//当页面出现input框后才能获取焦点
this.$nextTick(()=>{
this.$refs.ipt.focus()
})
}
}
}
</script>
运行结果
四、总结
1、为什么使用nextTick
使用Vue.nextTick()是为了可以获取更新后的DOM 。
2、Vue实现nextTick的原理
Vue在内部会维护一个异步队列。异步任务根据所处的环境，优先使用微任务，其次是宏任务。优先级：Promise.then＞MutationObserver＞setImmediate＞setTimeout。
nextTick 主要应用于 vue 内部的异步更新，对外暴露Vue.nextTick 和 vm.$nextTick 给程序员使用。nextTick 会先将内部的页面更新执行完毕，再去执行用户的 nextTick，因此在 nextTick 内可以获取到更新后的 dom。