vue-nextTick(nextTick---入门到离职系列)

官方定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

个人理解

假设我们更改了某个 dom 元素内部的文本,而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的。

小案例

html 复制代码
<template>
  <div ref="setting">{{msg}}</div>
</template>

<script>
export default {
  data(){
    return{
      msg:'HelloWorld!'
    }
  },
  methods:{
    
  },
  created(){
    //直接获取
    console.log(this.$refs.setting,'这个是在created中获取ref');//结果undefined
    //使用this.$nextTick()获取
    this.$nextTick(()=>{
      console.log(this.$refs.setting,'这个是在nextTick中获取ref');//结果是Dom元素
    })
  },
};
</script>

可以根据打印的顺序看到,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象。

面试题

1.NextTick是什么?

答:

1)官方定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

2)理解记忆:我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新
2.使用场景是什么?

如果想要在修改数据后立刻得到更新后的DOM结构
3.语法结构是什么样?

第一个参数为:回调函数(可以获取最近的DOM结构)

第二个参数为:执行函数上下文

javascript 复制代码
// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

组件内使用 vm.$nextTick() 实例方法只需要通过this.$nextTick(),并且回调函数中的 this 将自动绑定到当前的 Vue 实例上

javascript 复制代码
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
    console.log(this.$el.textContent) // => '修改后的值'
})

4.为什么使用this.$nexttick?

因为 vue 采用的异步更新策略 ,当监听到数据发生变化的时候不会立即去更新DOM,

而是开启一个任务队列,并缓存在同一事件循环中发生的所有数据变更;

这种做法带来的好处就是可以将多次数据更新合并成一次,减少操作DOM的次数,

如果不采用这种方法,假设数据改变100次就要去更新100次DOM,而频繁的DOM更新是很耗性能的。
5.nextTick 原理

将传入的回调函数包装成异步任务,异步任务又分微任务和宏任务,为了尽快执行所以优先选择微任务;

nextTick 提供了四种异步方法 Promise.then、MutationObserver、setImmediate、setTimeout(fn,0)

相关推荐
准橙考典15 分钟前
怎么能更好的通过驾考呢?
人工智能·笔记·自动驾驶·汽车·学习方法
小远yyds16 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果34 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长39 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
密码小丑2 小时前
11月4日(内网横向移动(一))
笔记