vue3之reactive

 一、对象

<script>
import { reactive } from 'vue'
export default {
    setup() {
        const car = reactive({
            brand: '宝马'，
            price: 100
        })
        return {
            car
        }
    }
}
</script>

 二、数组

<script setup>
import { reactive } from 'vue'
let list = reactive([])
const add = () => {
    let res = ['EDG', 'EDG', 'EDG']
    list = res // 这个是错误写法 因为这样会破坏list的响应式对象，使得不是响应式
    list.push(...res)  // 正确写法 
}
</script>

 reactive 定义的对象或则数组不能直接赋值，否则会破环响应式对象

解决： 数组可以使用push+解构，  或者给数组添加一个对象，对象里面加一个属性例如[{arr: []}]就可以list[0].arr = 新数组

 三、总结

reactive中传入一个普通对象，返回一个代理对象，也就是说如果对象没有用reactive的话数据改变是不会驱动页面上数据的变化的，加上reactive的话修改数据时页面上对应的数据会更新，

加上reactive这个对象是响应式的，复杂数据类型就用reactive