reactive介紹
作用: 定義多個數(shù)據(jù)的響應(yīng)式
const proxy = reactive(obj): 接收一個普通對象然后返回該普通對象的響應(yīng)式代理器對象
響應(yīng)式轉(zhuǎn)換是“深層的”：會影響對象內(nèi)部所有嵌套的屬性
內(nèi)部基于 ES6 的 Proxy
實現(xiàn)，通過代理對象操作源對象內(nèi)部數(shù)據(jù)都是響應(yīng)式的
<template>
<h2>組合式API reactive的使用</h2>
<h4>姓名：{{user.name}}</h4>
<h4>年齡：{{user.age}}</h4>
<h4>媳婦：{{user.wife}}</h4>
<button @click="upDate">更新數(shù)據(jù)</button>
</template>
<script lang="ts">
import {defineComponent, reactive,ref} from 'vue'
export default defineComponent({
name:'reactive',
//需求，顯示用戶的相關(guān)信息跨嘉，點擊按鈕，可以更新用戶的相關(guān)信息數(shù)據(jù)
setup(){
const obj={
name:'汪汪汪',
age:23,
wife:{
name:'咚咚咚',
age:24,
cars:['小電驢1','小電驢2','小電驢3']
}
}
//把數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)
//返回的是一個Proxy的代理對象棺蛛，被代理的目標對象就是obj對象
//user現(xiàn)在是代理對象，obj是目標對象
//user的對象類型是Proxy對象
//user對象是代理對象， obj對象是目標對象
//修改是 需要使用user.屬性進行修改 修改obj的話頁面不更新别惦，但是數(shù)據(jù)已經(jīng)被修改
const user = reactive(obj)
//****主要使用ref代理的時候 需要使用user.value.name獲取name屬性,使用reactive代理時使用user.name獲取name屬性
function upDate(){
user.name += '++'
user.age +=2
user.wife.cars[0] ='特斯拉'
}
return{
user,
upDate
}
}
})
</script>
<style>
</style>
