建站
咨詢
售后
建站咨詢
新聞中心
#聲明響應(yīng)式狀態(tài)
要為 JavaScript 對(duì)象創(chuàng)建響應(yīng)式狀態(tài)，可以使用 reactive 方法：
import { reactive } from 'Vue'
// 響應(yīng)式狀態(tài)
const state = reactive({
count: 0
}) reactive 相當(dāng)于 Vue 2.x 中的 Vue.observable() API ，為避免與 RxJS 中的 observables 混淆因此對(duì)其重命名。該 API 返回一個(gè)響應(yīng)式的對(duì)象狀態(tài)。該響應(yīng)式轉(zhuǎn)換是“深度轉(zhuǎn)換”——它會(huì)影響嵌套對(duì)象傳遞的所有 property。
Vue 中響應(yīng)式狀態(tài)的基本用例是我們可以在渲染期間使用它。因?yàn)橐蕾嚫櫟年P(guān)系，當(dāng)響應(yīng)式狀態(tài)改變時(shí)視圖會(huì)自動(dòng)更新。
這就是 Vue 響應(yīng)性系統(tǒng)的本質(zhì)。當(dāng)從組件中的 data() 返回一個(gè)對(duì)象時(shí)，它在內(nèi)部交由 reactive() 使其成為響應(yīng)式對(duì)象。模板會(huì)被編譯成能夠使用這些響應(yīng)式 property 的渲染函數(shù)。
在響應(yīng)性基礎(chǔ) API 章節(jié)你可以學(xué)習(xí)更多關(guān)于 reactive 的內(nèi)容。
#創(chuàng)建獨(dú)立的響應(yīng)式值作為 refs
想象一下，我們有一個(gè)獨(dú)立的原始值 (例如，一個(gè)字符串)，我們想讓它變成響應(yīng)式的。當(dāng)然，我們可以創(chuàng)建一個(gè)擁有相同字符串 property 的對(duì)象，并將其傳遞給 reactive。Vue 為我們提供了一個(gè)可以做相同事情的方法 ——ref：
import { ref } from 'vue'
const count = ref(0) ref 會(huì)返回一個(gè)可變的響應(yīng)式對(duì)象，該對(duì)象作為它的內(nèi)部值——一個(gè)響應(yīng)式的引用，這就是名稱的來源。此對(duì)象只包含一個(gè)名為 value 的 property ：
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1#Ref 展開
當(dāng) ref 作為渲染上下文 (從 setup() 中返回的對(duì)象) 上的 property 返回并可以在模板中被訪問時(shí)，它將自動(dòng)展開為內(nèi)部值。不需要在模板中追加 .value：
{{ count }}
#訪問響應(yīng)式對(duì)象
當(dāng) ref 作為響應(yīng)式對(duì)象的 property 被訪問或更改時(shí)，為使其行為類似于普通 property，它會(huì)自動(dòng)展開內(nèi)部值：
const count = ref(0)
const state = reactive({
count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1如果將新的 ref 賦值給現(xiàn)有 ref 的 property，將會(huì)替換舊的 ref：
const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1 Ref 展開僅發(fā)生在被響應(yīng)式 Object 嵌套的時(shí)候。當(dāng)從 Array 或原生集合類型如 Map訪問 ref 時(shí)，不會(huì)進(jìn)行展開：
const books = reactive([ref('Vue 3 Guide')])
// 這里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 這里需要 .value
console.log(map.get('count').value)#響應(yīng)式狀態(tài)解構(gòu)
當(dāng)我們想使用大型響應(yīng)式對(duì)象的一些 property 時(shí)，可能很想使用 ES6 解構(gòu)來獲取我們想要的 property：
import { reactive } from 'vue'
const book = reactive({
author: 'Vue Team',
year: '2020',
title: 'Vue 3 Guide',
description: 'You are reading this book right now ;)',
price: 'free'
})
let { author, title } = book遺憾的是，使用解構(gòu)的兩個(gè) property 的響應(yīng)性都會(huì)丟失。對(duì)于這種情況，我們需要將我們的響應(yīng)式對(duì)象轉(zhuǎn)換為一組 ref。這些 ref 將保留與源對(duì)象的響應(yīng)式關(guān)聯(lián)：
import { reactive, toRefs } from 'vue'
const book = reactive({
author: 'Vue Team',
year: '2020',
title: 'Vue 3 Guide',
description: 'You are reading this book right now ;)',
price: 'free'
})
let { author, title } = toRefs(book)
title.value = 'Vue 3 Detailed Guide' // 我們需要使用 .value 作為標(biāo)題，現(xiàn)在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide' 你可以在 Refs API 部分中了解更多有關(guān) refs 的信息
#使用 readonly 防止更改響應(yīng)式對(duì)象
有時(shí)我們想跟蹤響應(yīng)式對(duì)象 (ref 或 reactive) 的變化，但我們也希望防止在應(yīng)用程序的某個(gè)位置更改它。例如，當(dāng)我們有一個(gè)被 provide 的響應(yīng)式對(duì)象時(shí)，我們不想讓它在注入的時(shí)候被改變。為此，我們可以基于原始對(duì)象創(chuàng)建一個(gè)只讀的 Proxy 對(duì)象：
import { reactive, readonly } from 'vue'
const original = reactive({ count: 0 })
const copy = readonly(original)
// 在copy上轉(zhuǎn)換original 會(huì)觸發(fā)偵聽器依賴
original.count++
// 轉(zhuǎn)換copy 將導(dǎo)失敗并導(dǎo)致警告
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."分享標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0響應(yīng)性基礎(chǔ)
標(biāo)題URL：http://www.5511xx.com/article/coeecpi.html
