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

news2024/10/6 16:28:24

官方定义

在下次 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更新是很耗性能的。