vue3监听器this.$watch使用

Vue 3中的监听器`this.$watch`用于监听数据的变化并执行相应的操作。它可以在声明周期函数或方法中使用，并且可以在需要监听的时候进行监听并卸载。

以下是一个示例代码，演示了如何在Vue 3中使用`this.$watch`：

/* 在Vue组件中 */
export default {
  data() {
    return {
      totalUploadedList: [], // 要监听的数据
      filterList: [] // 过滤条件
    };
  },
  methods: {
    async submitPublish() {
      if (this.filterList.length === this.totalUploadedList.length) {
        console.log('所有文件都已经上传成功');
      } else {
        // 开始启动监听
        let unwatch = this.$watch('totalUploadedList', (newV) => {
          if (this.filterList.length === newV.length) {
            console.log('所有文件都已经上传成功');
            unwatch(); // 卸载监听
          }
        });
      }
    }
  }
};

在上述代码中，我们在`submitPublish`方法中使用`this.$watch`来监听`totalUploadedList`的变化。当`totalUploadedList`的长度与`filterList`的长度相等时，表示所有文件都已经上传成功，此时我们卸载监听器。