【 vue的$nexttick的使用】

vue的$nexttick的使用

一、背景

本文是自我网上搜索理解总结所得，以下内容，若有不妥当的内容，欢迎留言讨论！

二、正文

1、vue.js中的描述

2、案例
（1）、例1

<template>
<div>
     <p ref="test">{{message}}</p>
</div>
</template>

<script>
export default {
  name: "Home",
  data () {
    return {
        testData:"原数据1"
    };
  },
  mounted(){
      this.testData = "新数据2";      //更新数据
      <!--
      dom更新：vue将你对data的更改放到watcher的一个对列中（异步），
     /只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了）
     -->
      //更新完数据，进行dom操作，获取的还是原来的数据
      console.log(this.$refs.test.textContent); //原数据1
      this.$nextTick(()=>{
      <!--
      当执行到$nextTick的时候，这是一个异步事件，他也会把这个事件放到一个队列当中，
      异步事件是 不会立即执行的代码，会被js处理器放到一个队列里，
      按照队列的顺序优先级等一个个按次序执行， 新添加的事件都会放在队列末尾。
      因此，data数据修改，执行dom更新渲染在页面之后，这个时候执行$nextTick，就获取dom更新后的数据。
      -->
          console.log(this.$refs.test.textContent); //新数据2          
      })      
  }
}

（2）、例2

<template>
<div>
     <p ref="test">{{message}}</p>
</div>
</template>

<script>
export default {
  name: "Home",
  data () {
    return {
        testData:"原数据1"
    };
  },
  <!--
        在created()钩子函数执行的时候DOM 其实并未进行任何渲染，
        而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以
        等待dom生成以后再来获取dom对象。
        注：Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
-->
   created() {
      console.log('1111',this.$refs.test.textContent);//1111  undefined     
      this.$nextTick(() => {
       console.log('3333',this.$refs.test.textContent);//3333  原数据1     
      });
    }
  },
  mounted(){
      console.log('22222',this.$refs.test.textContent);//2222  原数据1     
      this.$nextTick(() => {
        console.log('4444',this.$refs.test.textContent);//4444  原数据1     
      });
}

（3）、例3
一位网友的父组件调用子组件案例

三、补充

也可以参考其他网友的vue.nextTick()方法的使用详解（简单明了）