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

官方定义

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

个人理解

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

小案例

<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结构)

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

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

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

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. Vue入门关门之指令系统

    2024-02-23 11:36:05       11 阅读
  2. Vue3入门实战笔记02

    2024-02-23 11:36:05       29 阅读
  3. VUE2从入门精通(一)

    2024-02-23 11:36:05       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-23 11:36:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-23 11:36:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-23 11:36:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-23 11:36:05       18 阅读

热门阅读

  1. docker-集成测试搭建

    2024-02-23 11:36:05       27 阅读
  2. #LLM入门|Prompt#1.9_总结_Summary

    2024-02-23 11:36:05       22 阅读
  3. DevOps:实现软件开发与运维的协同革命

    2024-02-23 11:36:05       29 阅读
  4. 初学python适合掌握的20个小技巧

    2024-02-23 11:36:05       19 阅读
  5. 重磅!MongoDB推出Atlas Stream Processing公共预览版

    2024-02-23 11:36:05       28 阅读
  6. 【Python编程+数据清洗+Pandas库+数据分析】

    2024-02-23 11:36:05       28 阅读
  7. 数据分析之数据预处理、分许建模、可视化

    2024-02-23 11:36:05       31 阅读