vue watch props无效

背景

---

如标题所示，是因为vue watch props无效才看到这篇文章的。网上有一堆讲这个问题的解决办法。比如：watch(() => props.val1, (newValue) => {...})。但是我用Vue3.3.4尝试后，也是没有成功。可能是因为props.val1是一个Ref的问题吧，具体也没研究。
但是我这边是这样一个场景，所以需要用watch监测props的变化。
我有一个A.vue，需要通过props传给B.vue。而B.vue使用这个props构建一个ref，用于展示界面。我希望在A.vue中更改传递给B的props的值，以达到B.vue更改界面的需求。但是有一个问题，ref只在onMounted的时候，初始化一次，后面不管怎样改动props，这个ref都不会改变。所以才使用watch监测props的变化，进而重新赋值给ref。但是我没成功。
那好，那我就在B.vue中通过defineExpose导出一个函数比如reset()，专门用于给ref重新赋值给props，比如

const props = defineProps({
	propsVal: String
})
const valRef = ref(props.propsVal)

function reset() {
	valRef.value = props.propsVal
}
defineExpose({
	reset,	// 导出后，A.vue中可以调用B.vue中的reset方法
})

这样A.vue中，更改props的传入值后，调用一下B.vue的reset()就可以了。
但是这个方法，很麻烦，有时候也会出现reset() function is not define.的错误提示。

解决方案

---

使用计算属性computed，而不是引用ref。
因为计算属性也具有响应性，也能过引起界面的更改。而且props的更改，能反映到computed属性的更改。更改一下上面的例子：

const props = defineProps({
	propsVal: String
})
const valComputed = computed(props.propsVal)

<tempate>
	<p> {{ valComputed }} </p>
</tempate>

补充

---

1. 传给props的必须是一个简单类型（比如boolean、number）或者是响应式对象（比如reactive({})）。