reactive
ref支持所有的类型，reactive只能支持引用类型 Array Object Map Set
reactive 是Proxy代理对象，更新的时候不能直接赋值，会破坏响应式
<template>
<div>{{ data.list.join('-') }}</div>
<div>{{ count }}</div>
<div>{{ state.count }}</div>
<button @click="add">操作</button>
</template>
<script setup>
import { reactive } from 'vue'
// const data = reactive({
// name: '林宥嘉',
// })
// let list = reactive([1, 2, 3])
let data = reactive({
list: [1, 2, 3],
})
let state = reactive({
count: 1,
})
let { count } = state // 解构
const add = () => {
// list = [1, 2, 3, 4] 直接赋值，丢失了响应式 内存地址不一样
// list.push(4)
data.list = [1, 2, 3, 4]
count++
console.log(count, 'count') // 2
console.log(state, 'state') // count属性永远是1
}
</script>
shallowReactive
只是对浅层的数据，如果是深层的数据只会改变值，不会改变视图
<template>
<div>{{ data }}</div>
<button @click="add">操作</button>
</template>
<script setup>
import { shallowReactive } from 'vue'
const data = shallowReactive({
name: '林宥嘉',
info: {
age: 30,
},
})
const add = () => {
// data.name = 'yoga'
// data.info = {
// age: 31,
// }
data.info.age = 31 // 没有响应式
console.log(data)
}
</script>
