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

最新推荐文章于 2024-05-06 21:03:44 发布

离奇6厘米

最新推荐文章于 2024-05-06 21:03:44 发布

阅读量932

点赞数

分类专栏： vue 文章标签：学习 javascript vue

本文链接：https://blog.csdn.net/Vest_er/article/details/126593777

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

一、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>