vue 中 watch 的简单使用

method 同级

    watch:{ // 监听
      /** 第一种方式：监听对象里面的属性，键路径必须加上引号 */
      "queryParams.fileName"(newVal, oldVal){
         console.log("旧值" + oldVal + '---新值' + newVal);
      }
      /** 第二种方式 */
      queryParams: {
        handler:(val) => {
          console.log(val.fileName)
          console.log(val.canonicalId)
        },
        deep: true // 对象内部的属性监听，也叫深度监听
      }
    }

例如：父组件向子组件传值，然后在子组件里面监听父组件传过来的值，根据值的变化调用不同的弹窗。

父组件
其中 @dialogVisible="dialogShow" 是子组件向父组件传值

    // html
     <NewAccount :newAccountData="accountData" @dialogVisible="dialogShow" />

     // data
      accountData: {
        insertTab: '',
        fileDO: {},
      },
    // methods
    dialogShow(val) { // 此方法是子组件向父组件传值
      this.insertDialogVisible = val
      this.detail(this.data.id)
    },
    init() { // 此方法是父组件向子组件传值
        this.accountData.insertTab = 'fileDown'
        this.accountData.fileDO = data
    }

子组件

  watch: {
    insertDialogVisible(val) { // 子组件向父组件传值
      if(!val) {
        this.$emit('dialogVisible', val)
      }
    },
    newAccountData: {// 父组件向子组件传值
      handler(val) {
        let data = val
        console.log(data);
        this.insertTab = data.insertTab
        this.fileDO = data.fileDO
      },
      immediate: true,
      deep: true,
    }
  },