1. ref()聲明響應式狀態

<template><!--在DOM元素調用變量時,不需要指定輸出變量的value,因為Vue會幫你輸出.value但是注意,這個幫助只會幫助頂級的ref屬性才會被解包--><div>{{ count }}</div><div>{{ object }}</div><div>{{ array }}</div>
</template>
<script setup>
//從vue中獲取ref方法
import { ref } from "vue";name: "App";
console.log('--------------------------------------------------------------------------')
//定義一個變量count,設置為響應式,初始值為0
let count = ref(0);
//輸出變量count的值,結果為RefImpl對象,其內部會有被數據劫持的value
console.log('count:',count);
//輸出變量count的value值,結果為0
console.log('count.value:',count.value);
//實現對變量的操作,0+1
count.value++;
//再次輸出變量count的value值,結果為1
console.log('+1后的count.value:',count.value);console.log('------------------------------ref使用對象-------------------------------------')//定義一個對象,使用ref聲明其狀態為響應式
let object=ref({id:1,name:'小綠'
})
//輸出object的value值為Proxy(Object) {id: 1, name: '小綠'}
console.log('其value:',object.value)
//輸出object下name的值為小綠
console.log('對象object的name值:',object.value.name)
//修改object的name值為小紅
object.value.name='小紅'
//輸出修改后的object的name值為小紅
console.log('修改object的name值后輸出:',object.value.name)console.log('------------------------------ref使用數組-------------------------------------')
let array=ref(['洗澡','學習','唱歌'])
//輸出array的value值為Proxy(Array) {0: '洗澡', 1: '學習', 2: '唱歌'}
console.log('其value:',array.value)
//輸出array下標為0的值為洗澡
console.log('對象array的下標為0的值:',array.value[0])
//修改array下標為0的值為打撲克
array.value[0]='打撲克'
//輸出修改后的array下標為0值為打撲克
console.log('改后的array下標為0值輸出:',array.value[0])
</script><style scoped>
</style>

HTML輸出
1
{ “id”: 1, “name”: “小紅” }
[ “打撲克”, “學習”, “唱歌” ]

2. reactive()使對象本身具有響應性

<template><!--在DOM元素調用變量時,不需要指定輸出變量的value,因為Vue會幫你輸出.value但是注意,這個幫助只會幫助頂級的ref屬性才會被解包--><div>{{ state.count }}</div><div>{{ array[0] }}</div>
</template>
<script setup>
//從vue中獲取ref方法
import { reactive } from "vue";name: "App";
console.log('------------------------------reactive使用對象-------------------------------------')
//定義一個對象state,設置其響應性,state對象的count屬性值為0
let state = reactive({count:0
});
//輸出state對象值
console.log('state對象值為:',state)
//輸出state對象的count屬性值
console.log('state對象的count屬性值為:',state.count)
//設置state對象的屬性count值為1
state.count++
//輸出state對象的count屬性加1后的值
console.log('輸出state對象的count屬性加1后的值:',state.count)console.log('------------------------------reactive使用數組-------------------------------------')
//定義數組,設置其響應性
let array = reactive(['洗澡','學習','唱歌']);
//輸出array數組值
console.log('array數組值為:',array)
//輸出array數組下標為0的值
console.log('array數組下標為0的值為:',array[0])
//設置array數組下標為0的值為看電視
array[0]='看電視'
//輸出array數組下標為0的數據修改后的值
console.log('輸出array數組下標為0的數據修改后的值:',array[0])console.log('------------------------------數據原理及注意事項-------------------------------------')
//reactive() 返回的是一個原始對象的 Proxy，它和原始對象是不相等的
const raw={}
const proxy=reactive(raw)
console.log('對比proxy與raw設置響應性后是否相等:',proxy===raw)//對同一個原始對象調用 reactive() 會總是返回同樣的代理對象，而對一個已存在的代理對象調用 reactive() 會返回其本身
console.log('對同一個原始對象raw調用reactive():',proxy===reactive(raw))
console.log('對一個已存在的代理proxy對象調用reactive():',proxy===reactive(proxy))//依靠深層響應性，響應式對象內的嵌套對象依然是代理
const proxy1=reactive({})
proxy.nested = raw
console.log('proxy1嵌套對象nested與raw是否相等:',proxy.nested===raw)
</script><style scoped>
</style>