一辈灼、ref
接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的 ref 對(duì)象帽蝶。ref 對(duì)象具有指向內(nèi)部值的單個(gè) property
.value
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ str }}</div>
`,
setup() {
let { ref } = Vue;
let str = ref('hello world');
setTimeout(() => {
str.value = 'world hello';
}, 3000);
return {
number
}
}
})
app.mount("#app")
</script>
通過(guò) proxy 對(duì)數(shù)據(jù)進(jìn)行封裝称近，當(dāng)數(shù)據(jù)變化時(shí)造虎，觸發(fā)模板等內(nèi)容的更新
通過(guò) proxy傅蹂，"hello world" 變成 proxy({value:'hello world'}) 這樣的一個(gè)響應(yīng)式引用。
ref 用于處理基礎(chǔ)類型的數(shù)據(jù)算凿，str 初始頁(yè)面的值是 hello world份蝴，3 秒過(guò)后值會(huì)變成 world hello
二、reactive
返回對(duì)象的響應(yīng)式副本
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ nameObj.name }}</div>
`,
setup() {
let { reactive } = Vue;
let nameObj = reactive({ name: 'zhangsan' })
setTimeout(() => {
nameObj.name = 'lisi';
}, 3000);
return {
nameObj
}
}
})
app.mount("#app")
</script>
通過(guò) proxy氓轰，"{ name: 'zhangsan' }" 變成 proxy({ name: 'zhangsan' }) 這樣的一個(gè)響應(yīng)式引用婚夫。
ref 用于處理非基礎(chǔ)類型的數(shù)據(jù)，nameObj.name 初始頁(yè)面的值是 zhangsan署鸡，3 秒過(guò)后值會(huì)變成 lisi
三案糙、readonly 和 toRefs
readonly 用于只讀數(shù)據(jù)，不可修改
toRefs 將響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象靴庆，其中結(jié)果對(duì)象的每個(gè) property 都是指向原始對(duì)象相應(yīng) property 的ref
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ name }}</div>
`,
setup() {
let { reactive, readonly, toRefs } = Vue;
let nameObj = reactive({ name: 'zhangsan' })
// 將值設(shè)置為只讀模式时捌，則不可修改
// let nameObj = readonly({ name: 'zhangsan' })
setTimeout(() => {
nameObj.name = 'lisi';
}, 3000);
const { name } = toRefs(nameObj);
return {
name
}
}
})
app.mount("#app")
</script>
toRefs 當(dāng)調(diào)用 proxy({ name: 'zhangsan' }) 后，會(huì)轉(zhuǎn)換成 { name: proxy({value: 'zhangsan'}) }
轉(zhuǎn)換之后去做解構(gòu) name 都會(huì)變成一個(gè)響應(yīng)式數(shù)據(jù)炉抒。
