vuejs2.x watch数组 进入死循环

Question

以下是我去监听popupMsg1数组，但是监听好像进入了一个死循环，一直输出watch，导致页面长时间没有响应

  export default {
    data() {
      return {
        popupMsg: []
      }
    },
    computed: {
      popupMsg1() {
        this.popupMsg = this.$store.state.userGroup.manualTags.popupMsg;
        return this.popupMsg;
      } 
    },
    watch: {
      popupMsg1: {
        handler() {
          console.log('watch');
          var msg = this.popupMsg1.shift();
          if(msg) {
            this.$message.error(msg);
          }
　　　　 },
　　　　 deep: true
      }
    }
  }
  
  

Answer 1

shift方法会改变原数组，然后popupmsg1计算属性又会追踪所有依赖值，当发生变化重新计算，然后watch又监听这个值，导致死循环

Answer 2

尝试computed看能不能满足你的需求

Answer 3

  // 这样可以吗
  export default {
    data() {
      return {
        popupMsg: []
      }
    },
    watch: {
      popupMsg1: {
        handler() {
          console.log('watch');
          this.popupMsg1 = this.$store.state.userGroup.manualTags.popupMsg;
          var msg = this.popupMsg1.shift();
          if(msg) {
            this.$message.error(msg);
          }
　　　　 },
　　　　 deep: true
      }
    }
  }