Vue中的watch使用

淩亂°似流年 2022-09-05 06:12 214阅读 0赞

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

### 使用示例 ###

> **对日期组件观察,当值变化时做赋值处理操作,把组件绑定的checkTime参数这个数组中的两个时间分别赋值给checkTimeBegin和checkTimeEnd两个字段**

<el-form-item label="检查日期" prop="checkTime" :col="2">
      <el-date-picker v-model="queryParams.checkTime" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" range-separator="到" end-placeholder="结束日期" />
    </el-form-item>

export default {
      name: "Demo",
      components: {},
      //如果在data中没有相应的属性的话，是不能watch的
      data() {
        return {
          queryParams: {
            checkTime: null,
            checkTimeBegin: null,
            checkTimeEnd: null
          }
        };
      },
      created() {
        this.getList();
      },
      methods: {
        getList() {
          this.loading = true;
          listCheckTask(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
      },
      watch: {
        // 检查日期参数监听
        'queryParams.checkTime': {
          handler(newCheckTime) {
            this.queryParams.checkTimeBegin = isEmpty(newCheckTime) ? null : newCheckTime[0];
            this.queryParams.checkTimeEnd = isEmpty(newCheckTime) ? null : newCheckTime[1];
          }
        }
      }
    };