将 Object 推送到数组后将其与其父级分离

Question

我的博客有一个表格。 该博客是一个 object，其中包含许多内容对象。 我想我没有想清楚，因为我推送到 Array 的内容保持其对父级的反应性，即使它不是 ref 或类似的东西。

这是 Vue 组件：

<script setup lang="ts">

const blog = ref({
    link: 'Link',
    category: 'category',
    title: 'title',
    image: 'Image',
    body: 'Body',
    content: [] as any[]
})

let contentItem = {
    parent: 'parent',
    title: 'title',
    image: 'Image',
    code: 'Code',
    body: 'Body',
}

// Add Content Item
function addContent(content: any) {
    const item = content
    blog.value.content.push(item)
} 

</script>


<template>
<div class="flex p-8 text-slate-600 w-full flex-col gap-4 rounded">
            <h4 class="font-bold text-red-50">Blog Content</h4>
            <input type="text" v-model="contentItem.parent">
            <input type="text" v-model="contentItem.title">
            <input type="text" v-model="contentItem.image">
            <textarea class="w-full h-[200px]" type="text" v-model="contentItem.code"> {{ contentItem.code }} </textarea>
            <textarea class="w-full h-[200px]" type="text" v-model="contentItem.body"> {{ contentItem.body }} </textarea>
            <button class="p-4 w-1/2 bg-slate-50" type="button" @click="addContent(contentItem)">Add Content</button>
        </div>
</template>

`

我尝试过使用“只读”，我尝试将值传递给另一个 object（如您在当前代码中看到的那样），我只是不明白为什么它可以传递一个新的 object，但 object 都是一样的。我知道解决方案会很简单，但我看了看，我一直发现的是人们希望将反应性保持在数组中（与我的问题相反）。

Answer 1

尝试按值而非引用推送 object：

 const { ref, computed, onMounted } = Vue const app = Vue.createApp({ setup() { const blog = ref({ link: 'Link', category: 'category', title: 'title', image: 'Image', body: 'Body', content: [] }) let contentItem = ref({ parent: 'parent', title: 'title', image: 'Image', code: 'Code', body: 'Body', }) function addContent(content) { blog.value.content.push({...content}) } return { addContent, contentItem, blog } } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="flex p-8 text-slate-600 w-full flex-col gap-4 rounded"> <h4 class="font-bold text-red-50">Blog Content</h4> <input type="text" v-model="contentItem.parent"> <input type="text" v-model="contentItem.title"> <input type="text" v-model="contentItem.image"> <textarea class="w-full h-[200px]" type="text" v-model="contentItem.code"> {{ contentItem.code }} </textarea> <textarea class="w-full h-[200px]" type="text" v-model="contentItem.body"> {{ contentItem.body }} </textarea> <button class="p-4 w-1/2 bg-slate-50" type="button" @click="addContent(contentItem)">Add Content</button> </div> {{blog}} </div>