Vue 3组成API中的参数是否具有反应性?

Question

在组合API中，反应性使用ref()和reactive()函数为数据创建代理。据我所知，主要区别在于ref创建对象的浅拷贝，而reactive创建对象的深拷贝。

我正在传递一个对象作为一个组件的参数，我有反应性的问题。具体来说，对象的字段在更新时不会触发UI中的任何更改。这让我相信参数是作为参考而不是响应对象传递的。

是否有一种方法可以在对象的内容发生变化时更新视图?

Answer 1

实际上ref并不创建一个浅拷贝，一旦你将一个对象传递给ref，它将调用createReactiveObject方法来生成一个响应对象。关于浅ref，可以使用shallowref方法，https://v3.vuejs.org/api/refs-api.html#shallowref

由于您没有提供任何代码，这里只给您一个简单的示例供您参考:

将comments定义为响应对象，不需要为props引用:

父组件:

<template>
<Comment v-for="comment in comments" :comment="comment" :key="comment.id"></Comment>
<button @click="addCmt">addCmt</button>
</template>
<script>
import Comment from "./components/Comment";
import {reactive} from "vue";
export default {
name: "Params",
setup() {
const comments = reactive([{id: 1, name: 'a'}, {id: 6, name: 'c'}]);
function addCmt() {
comments.unshift({id: comments.length + 10, name: 'k'});
}
return {
comments,
addCmt
}
},
components: {Comment}
}
</script>

评论组件:

<template>
<div>comments {{ comment.id }}</div>
</template>
<script>
export default {
name: "Comment",
props: ['comment'],
setup(props, ctx) {
const comment = props.comment;
return {comment};
}
}
</script>