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)

相关推荐
帅帅哥的兜兜1 小时前
react中hooks使用
前端·javascript·react.js
吞掉星星的鲸鱼2 小时前
使用高德api实现天气查询
前端·javascript·css
lilye662 小时前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....4922 小时前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9964 小时前
html处理Base文件流
linux·前端·html
花花鱼4 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_4 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo5 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)6 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之7 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue