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

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

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

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

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

相关问题

uniapp vue3 选项式写法不要组合式写法 父子组件传参，子组件如何更新父组件传来的值

在uni-app的Vue3中，如果你想要避免使用传统的父子组件间的props传递并改用选项式（Composition API）的思路，你可以考虑使用`setup()`函数以及`ref`或自定义 reactive 对象来管理状态。

假设你有一个父组件（Parent.vue），它通过`props`将数据传给子组件（Child.vue）。而在采用选项式写法后，你可以这样做：

**Parent.vue (传统props传参)**

<template>
  <view>
    <child :message="parentMessage" />
  </view>
</template>

<script setup>
import Child from '@/components/Child.vue';

const parentMessage = ref('这是父组件的初始消息');
</script>

**Child.vue (不再直接接收props，改用自定义响应式变量)`
<template>
<button @click="updateMessage">点击更新</button>
<div>{{ message }}</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { ref } from '@vue/reactivity';

// 在setup内部创建响应式变量
const message = ref('');

onMounted(() => {
// 子组件监听父组件的值变化
watch(
() => parentMessage.value,
newValue => {
// 更新子组件的message
message.value = newValue;
}
);
});

function updateMessage() {
// 自己控制state的变化
message.value = '这是子组件修改后的消息';
}
</script>

在这个例子中，`watch`函数用于监听`parentMessage`的变化，并自动同步到`message`，使得当父组件的数据更新时，子组件会相应地显示新值。而子组件的`updateMessage`函数则可以独立更新`message`，不需要依赖父组件的prop。

vue3 setup watch写法

在Vue 3中，`setup` 函数是组件的新特性，它提供了一个更简洁的方式来声明式地管理组件内的响应式数据。当你需要监听某个数据的变化并在变化时执行某些操作时，可以使用 `watch` 方法。

`watch` 的基本语法如下：

import { watch } from 'vue';

setup() {
  // 定义一个局部变量或计算属性
  const currentValue = ref('initial value');

  // 使用 watch 创建一个观察者
  watch(
    // 要监视的数据源，可以是表达式、函数返回值或直接的对象属性
    (currentValue) => currentValue, 
    // 当数据源改变时执行的回调函数
    (newVal) => {
      console.log(`当前值已更新为: ${newVal}`);
    },
    {
      // 可选参数，例如 deep 是否深度监听，默认为 false
      deep: false,
      // 或者 immediate 是否立即执行一次回调，默认为 false
      immediate: true
    }
  );
}