vue3setup写法中父组件向子组件传了一个数组，子组件watch监听不到父组件传的值

可能是因为你传递的数组是一个对象或者数组，而对象和数组在 JavaScript 中是引用类型，所以在 Vue.js 中，父组件传递给子组件的引用类型的数据，如果不进行特殊处理，子组件中的数据是和父组件中的数据是同一个引用地址，所以子组件中的数据变化也会影响父组件中的数据，这就会导致子组件中的 watch 监听不到父组件传递的数据变化。

解决方法是在子组件中使用 `props` 属性的 `deep` 选项，用来监听对象或数组的变化。

props: {
  myArray: {
    type: Array,
    default: () => []
  }
},
watch: {
  myArray: {
    deep: true,
    handler(newValue, oldValue) {
      // 处理数据变化
    }
  }
}

这样就可以监听到父组件传递的数组的变化了。

相关问题

vue3组合式写法模板循环数组拿到上一个数组中的值

在Vue3中，你可以使用组合式API来编写组件，同时也可以使用 `v-for`指令来循环数组。如果你想获取上一个数组中的值，可以使用 `computed`计算属性和 `watch` 监听器来实现。

下面是一个示例代码，假设你有一个数组 `items`，你想在循环中获取上一个元素的值：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      上一个元素值：{{ prevItem }}
      当前元素值：{{ item }}
    </div>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([1, 2, 3, 4, 5]);
    const currentIndex = ref(0);
    const prevItem = computed(() => {
      if (currentIndex.value === 0) return null; // 如果是第一个元素，返回null
      return items.value[currentIndex.value - 1]; // 返回上一个元素的值
    });

    watch(currentIndex, (index) => {
      console.log('当前索引值', index);
    });

    return {
      items,
      currentIndex,
      prevItem,
    };
  },
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个响应式变量 `currentIndex`，表示当前循环的索引值。然后我们使用 `computed` 计算属性 `prevItem` 来获取上一个元素的值。在 `prevItem` 中，我们使用 `currentIndex.value` 来获取当前索引值，并根据它来计算上一个元素的值。

最后，我们使用 `watch` 监听器来监控 `currentIndex` 的变化，以便我们在控制台上输出当前索引值。

在模板中，我们使用 `v-for` 循环数组 `items`，并在循环中使用 `prevItem` 来获取上一个元素的值，并将它与当前元素的值一起显示出来。

vue选项式中watch深度监听的写法

在Vue选项式中，可以通过`watch`选项的第二个参数来开启深度监听。第二个参数可以是一个布尔值或一个对象，其中`deep`属性表示是否开启深度监听。如果`deep`属性为`true`，则表示开启深度监听。

下面是一个示例：

import { watch } from 'vue';

export default {
  data() {
    return {
      message: 'Hello Vue!',
      data: {
        name: 'Tom',
        age: 20
      }
    };
  },
  setup() {
    watch(
      () => data,
      (newVal, oldVal) => {
        console.log('data对象或子属性发生变化');
      },
      { deep: true }
    );
  }
};

在上述示例中，使用了Vue 3中的`watch`函数来实现深度监听。在`watch`函数的第三个参数中开启了`deep`属性，当`data`对象或其子属性发生变化时，`watch`函数的第二个参数就会被触发。

需要注意的是，在Vue 3中，选项式API和组合式API的写法有所不同，需要根据具体的情况来选择使用哪种API。如果需要在组件中使用组合式API，需要使用`setup`函数来实现。