watch事件使用立即实行如何在mounted后（DOM 更新之后)执行.（精辟，细节）。用 this.$nextTick(() =＞ {}）实现。

为什么有这需求

希望在 Vue 组件中使用 watch 监听一个 props 的变化，并在变化发生时执行不同的实例方法，同时由于需要在监听时立即执行，但又碰到了实例化类的顺序问题。

因为在传入import FFCesium from '../../FFCesium/core/index.js';里面包含一个类

在  mounted里面实例。  this.ffCesium = new FFCesium('cesiumContainer');

然而接收父传入的值 （多选框）变化去执行不同的实例方法

需要watch监听值的变化执行不同的方法，且为保留数据监听必须immediate: true立即执行。

然而watch立即执行时，类还未实例。（开启immediate: true，watch执行在mounted之前）

<template>
    <div id="cesiumContainer">
    </div>
</template>

<script>
import FFCesium from '../../FFCesium/core/index.js';
export default {
  name: 'cesiumDemo',
  props: {
    option: Object,
    component: Object
  },
  data() {
    return {
      selectedDate: '',
      ffCesium:null,
      mapType:this.option.type
    };
  },
  computed: {
   
    // 改变视角的值
    comSetView() {
      return `${this.option.lng},${this.option.lat},${this.option.height},${this.option.pitchRadiu}`;
    },
  },
  watch: {
   
    // 视角变化
    comSetView: {
      deep: true,
      immediate: true,
      handler(){
        this.$nextTick(() => {
          this.metSetView()
        });
      },
    },
  },
  mounted() {
  this.ffCesium = new FFCesium('cesiumContainer');
  },
  methods: {
  
    //视角设置
    metSetView() {
      const {
        lng,lat,height,pitchRadiu,
      } = this.option;
      this.ffCesium.setView({
      lng,
      lat,
      height,
      pitchRadiu
    });
    },
    
};
</script>

• this.$nextTick 用来延迟执行 this.metSetView()，直到 Vue.js 更新了 DOM。。在dow更新完之后执行。

 

mounted实例已经挂载到 DOM 上后调用该钩子函数。这时候 $el 属性指向挂载的 DOM 元素，可以进行 DOM 操作等后续工作。

watch immediate: true 使得 watch 监听器在组件挂载完成后立即执行一次，而不必等待值的实际变化。

而打印执行顺序是watch先执行于mounted。so需要使用this.$nextTick 用来延迟执行监听改变时执行的关于mountde里面实例的类。使得在实例完成后又可以马上使用实例方法。

顺序：

watch没变也执行 → this.$nextTick未执行 → mounted实例类 →dow更新完成 → watch里的this.$nextTick执行