Vue-watch的简单应用

Vue 中有一个方法 watch，它是用来监测Vue实例上的数据变动。

方法一

监听data里面的数据，下面展示一个 demo片段。

 export default {
    data() {
      return {
        imgUrl:'',
        flag:'',
        showBtn:false,

      }
    },
     watch:{
      flag(newFlag,oldFlag){
        if(this.flag != ""){
          this.showBtn = true;
        }else{
          this.showBtn = false;
        }
      }
    },

方法二

监听store里面的数据，下面展示一个 demo片段。

 export default {
    data() {
      return {
        carModel: '',

      }
    },
    watch:{
      "$store.state.carModel":{
        deep:true,
        handler:function (newValue,oldValue) {
          this.carModel = newValue;
        }
      },
    },

两种写法仅供参考