VUE的watch和computed执行顺序

项目中用到了以下代码

  watch: {
    
    
    list: {
    
    
      deep: true,
      immediate: true,
      handler(val) {
    
    
        if (val.length > this.num) {
    
    
          for (let i = 0, len = val.length; i < len; i += this.num) {
    
    
            this.everyList.push(val.slice(i, i + this.num));
          }
        } else {
    
    
         // 这句话 和 下边的 计算属性都用到了ref =  mySwiper;
         // 我在这打印console.log(this.$refs.mySwiper)  输出 undefined，导致了报错
          this.$refs.mySwiper.swiper.autoplay.start();
          this.everyList = [val];
        }
      },
    },
  },
  computed: {
    
    
    swiper() {
    
    
      return this.$refs.mySwiper.swiper;
    },
 },

之后我就想着是 watch 跟 computed 执行顺序的问题了

初始化执行顺序

• 当watch设置了immediate:true的情况下
• watch 先执行，mounted 后执行

当这个值是watch 监听 computed 也依赖这个值时，如果这个值发生变化

• watch 先执行
• computed 后执行