美文网首页
vue中 nextTick 能做些什么?

vue中 nextTick 能做些什么?

作者: 柚子硕 | 来源:发表于2020-02-08 22:31 被阅读0次

   nextTick 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

   在 created 环节 ref 和 dom 并没有被渲染,但是写在 nextTick 内获取到了 dom。也就是说 nextTick 的回调在 moutend 执行后 dom 挂载完毕才跟着执行。

<template>
  <div id="app">
    <HelloWorld ref="holllowWord" msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: { HelloWorld },
  created() {
    console.log(this.$refs.holllowWord) // underfind
    this.$nextTick(()=>{
      console.log(this.$refs.holllowWord) // 获得了 holllowWord 实例信息
    })
  },
}
</script>

在 moutend 内有时候执行一些操作 dom 的方法发现获取不到 dom,解决方案是使用 nextTick ,还不行的话就 nextTick + setTimeout

 mounted() {
     this.$nextTick(()=>{
       setTimeout(()=>{
         // ....
       })
    })
  },

相关文章

网友评论

      本文标题:vue中 nextTick 能做些什么?

      本文链接:https://www.haomeiwen.com/subject/zubixhtx.html