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)

相关推荐
你挚爱的强哥13 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
Red Red1 小时前
网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务
网络·笔记·学习·安全·web安全
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
贰十六2 小时前
笔记:Centos Nginx Jdk Mysql OpenOffce KkFile Minio安装部署
笔记·nginx·centos
知兀2 小时前
Java的方法、基本和引用数据类型
java·笔记·黑马程序员
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket