工作中遇到的问题（关于vue中this.nextTick的使用）

问题描述：

在做项目迁移三维测量工具的时候，遇到一个问题，

引入三维测量组件，三维测量组件中有一个mounted函数，

页面刷新的时候不好使，但是当更改mounted函数中的一个值，然后刷新的时候，就好使了，经过分析是由于父组件中有mounted函数，然后，子组件中也有mounted函数，当页面加载的时候，并不能使子页面的mounted函数执行，所以引入了一个this.$nextTick()就完美解决了这个问题。

**什么是this.$nextTick()?** 首先明白this.$nextTick()的使用场景: this.$nextTick()是将回调延时到dom更新的时候执行，在修改数据之后立即使用它，然后等待dom的更新。 总的来说，点击改变了一个dom树中的值，如果改变了dom树中的文本，而我们想直接打印打印这个更改之后的文本，是需要在页面刷新之后才可以的，

<template>
  <div>
      <button ref="tar" type="button" name="botton" @click="testClick">{{content}}</button>
  </div>
</template>

<script>
export default {
  name: "VueIndex18",

  data() {
    return {
        content:'初始值'
    };
  },

  mounted() {
    
  },
  created(){
    
  },

  methods: {
    testClick(){
      this.content = '改变了的值'
      console.log(this.$refs.tar.innerHTML) // 打印的是初始值
    }
  },
};
</script>

上述代码中，点击按钮，打印的始终是之前的值，如何获取现在的值呢

methods: {
    testClick(){
      this.content = '改变了的值'
      this.$nextTick(()=>{
          console.log(this.$refs.tar.innerHTML) // 打印的是改变了的值
      })
      
    }
  },

这么就能实现当数据改变的时候再渲染dom