Vue中的nextTick作用和几个简单的使用场景

目的

理解下 nextTick 的作用和几个简单的使用场景

正文

起什么作用？

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

我想各位都知道或了解 Vue 的渲染流程，Vue 在监听到数据变化后会重新渲染，配合 VDOM 更新真实的 DOM，而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后。

如何使用？

有两种使用方法，一种是传入回调，另一种是 Promise，官方使用示例如下：

// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () {
 // DOM 更新了}
)// 作为一个 PRomise 使用 (2.1.0 起新增，详见接下来的提示)Vue.nextTick() .then(function () {
 // DOM 更新了 }
    )

如果在 SPA（单文件组件） 中，可能是这个样子

template>
     div id="test">
{
{
msg}
}
    /div>
    /template>
    script>
export default {
 name: 'app', data() {
 return {
  "msg": "Hello World!" }
 }
, method() {
     this.msg = "Hi World!";
     this.$nextTick(() =>
 {
  console.LOG('DOM updated:', document.getElementById('test').innerHTML) }
    );
 }
}
    /script>
    

有什么使用场景？

需要等待渲染完成后执行的一些方法

初始化绑定或操作 DOM

比如在 created 和 mounted 回调中，需要操作渲染好的 DOM，则需要在 nextTick 中执行相关逻辑，这在必须使用一些老的需要绑定 DOM 的库时很有用。

比如，在加载 UEdITor 时，可能会这样玩

template>
    script id="container" name="content" tyPE="text/plain">
     这里写你的初始化内容 /script>
    /template>
    script>
export default {
 mounted() {
      this.nextTick(() =>
 {
       VAR ue = UE.getEditor('container');
  }
    );
 }
}
    

获取元素宽度

在 Vue 中获取元素宽度有两种方式，第一种是通过 $refs[ref名称].style.width，第二种可以使用传统操作 DOM 的方式获取，但这两者要获取到准确的元素宽度，则需要在 DOM 渲染完毕后执行。

template>
    p ref="myWidth" v-if="showMe">
{
{
 message }
}
    /p>
     button @click="getMyWidth">
    获取p元素宽度/button>
    /template>
    script>
export default {
 data() {
 return {
  message: "Hello world!",  showMe: false, }
, methods: {
  getMyWidth() {
      this.showMe = true;
      //this.message = this.refs.myWidth.offsetWidth;
      //报错 TypeError: this.refs.myWidth is undefined   this.nextTick(()=>
{
      //dom元素更新后执行，此时能拿到p元素的属性   this.message = this.refs.myWidth.offsetWidth;
 }
)  }
 }
 }
}
    /script>
    

总结

虽说 Vue 的设计理念并不建议我们去直接操作 DOM，但有些场景下出现了特别令人迷惑的问题，理解 Vue 的渲染逻辑后，使用 nextTick() 可以解决。

以上就是如何使用Vue中的nextTick的详细内容，更多关于使用vue中的nextTick的资料请关注其它相关文章！

• Vue nextTick的原理解析
• 浅析vue中的nextTick
• 全面解析Vue中的$nextTick
• VUE异步更新DOM - 用$nextTick解决DOM视图的问题
• Vue.js原理分析之nextTick实现详解
• Vue中this.$nextTick的作用及用法
• 详解vue中$nextTick和$forceUpdate的用法
• 深入学习Vue nextTick的用法及原理
• vue中nextTick用法实例
• vue源码nextTick使用及原理解析
• 一文了解Vue中的nextTick
• 浏览器事件循环与vue nextTicket的实现
• vue中$nextTick的用法讲解
• 从源码里了解vue中的nextTick的使用
• vue2.0$nextTick监听数据渲染完成之后的回调函数方法
• 详解vue指令与$nextTick 操作DOM的不同之处
• 深入理解Vue nextTick 机制
• 谈谈Vue中的nextTick

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！