computed get,set方法修改父组件传递的数组数据 做个笔记

<template>
    <div>computed测试数据
        <div v-for="(item,i) in changeArr" :key="i">{{item.name}}</div>
        <div @click="add">增加</div>
    </div>
</template>
<script>
export default {
    props:{
        arr:{
            type:Array,
            default:()=>[]
        }
    },
    computed:{
        changeArr:{
            get(){
                return [...this.arr]
            },
            set(newArray){
                console.log(newArray,'newArray')
                const newItems = newArray.filter((item)=>!this.arr.include(item)) //添加
                console.log(newItems,'newItems')
                this.arr.push(...newItems)
            }
        }
    },
    data(){
        return{
           data:[
            {
                name:'测试'
            },
            {
                name:"数据"
            }
           ]
        }
    },
    methods:{
        add(){
            const newItem = { name: '新项目' };  
            let list = this.arr.push(newItem)
            this.changeArr = list
        }
    }
}
</script>