Vue学习第17天——netTick()的原理及使用

一、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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

运行结果

四、总结

1、为什么使用nextTick

使用Vue.nextTick()是为了可以获取更新后的DOM 。

2、Vue实现nextTick的原理

Vue在内部会维护一个异步队列。异步任务根据所处的环境，优先使用微任务，其次是宏任务。优先级：Promise.then＞MutationObserver＞setImmediate＞setTimeout。

nextTick 主要应用于 vue 内部的异步更新，对外暴露Vue.nextTick 和 vm.$nextTick 给程序员使用。nextTick 会先将内部的页面更新执行完毕，再去执行用户的 nextTick，因此在 nextTick 内可以获取到更新后的 dom。