watcheffect深度监听

watchEffect 是 Vue 3 中新增的一个响应式API，用于深度监听数据变化，当监听的数据发生变化时，自动执行传入的回调函数。

watchEffect 可以监听哪些数据类型：
- Ref 对象
- Reactive 对象
- 嵌套对象和数组

示例代码如下：

import { reactive, ref, watchEffect } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello world',
  list: [
    {
      id: 1,
      name: 'apple'
    },
    {
      id: 2,
      name: 'banana'
    }
  ]
})

const count = ref(0)

watchEffect(() => {
  console.log(state.count) // 监听 state.count 的变化
  console.log(state.message) // 监听 state.message 的变化
  console.log(state.list[0].name) // 监听 state.list[0].name 的变化
  console.log(count.value) // 监听 count 的变化
})

相关问题

vue3深度监听

在 Vue3 中，可以使用 `watch` 和 `watchEffect` 两种方式进行深度监听。

1. `watch`：可以手动指定监听对象，当指定的对象发生变化时，执行回调函数。若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watch(
      () => obj,
      (newObj, oldObj) => {
        console.log('obj changed', newObj, oldObj);
      },
      { deep: true }
    );

    return { obj };
  },
};
</script>

2. `watchEffect`：自动追踪数据依赖，并在其变化时执行回调函数。同样，若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watchEffect(() => {
      console.log('obj changed', obj);
    }, { deep: true });

    return { obj };
  },
};
</script>

vue2 watch深度监听数组变化

在 Vue.js v2 中，`watch` 提供了一个简单的机制来监听数据的变化并执行特定的操作。如果你想要深度监听数组变化，即当数组内的元素或者其属性发生改变时也能触发回调，Vue 的 `deep` 属性可以帮助你实现这个需求。

使用方法是在 `watch` 对象的选项中设置 `deep` 参数为 `true`，示例如下：

data() {
  return {
    arr: [ { name: 'Tom' }, { name: 'Jerry' } ]
  }
}

methods: {
  handleArrayChange() {
    // 在这里处理数组变化操作
  }
}

watch: {
  arr: {
    handler(newVal, oldVal) {
      this.handleArrayChange();
    },
    deep: true // 表示深度监听
  }
}

在这个例子中，当你对数组中的任何一个元素（如 `arr[0].name` 或者新添加、删除元素）进行修改时，`handleArrayChange` 方法会被调用。注意，在 Vue v3 版本中，推荐使用 `reactive` 和 `watchEffect` 来实现更现代的数据反应机制，但上述代码对于 Vue v2 项目仍然有效。如果遇到问题或有其他疑问，请提问：