vue3监听dataList中属性变化

在Vue3中，可以使用watch函数来监听dataList中属性的变化。具体的代码如下所示：

import { watch } from 'vue';

export default {
  data() {
    return {
      dataList: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Alice' }
      ]
    };
  },
  mounted() {
    watch(() => this.dataList, (newVal, oldVal) => {
      console.log('dataList changed', newVal, oldVal);
    }, { deep: true });
  }
};

在上面的代码中，我们使用watch函数来监听this.dataList的变化。第一个参数是一个函数，返回this.dataList，表示要监听的数据。第二个参数是一个回调函数，当dataList发生变化时会触发该回调函数，回调函数的参数是新的值和旧的值。我们可以在回调函数中进行相应的处理。最后一个参数是一个配置对象，我们可以使用{ deep: true }来监听dataList的深层次变化。

在上面的例子中，我们在mounted生命周期钩子中使用watch函数来进行监听，当dataList发生变化时会打印出新的值和旧的值。你也可以在其他适当的生命周期钩子中使用watch函数来进行监听