Vue 3.0 響應(yīng)性 基礎(chǔ)

#聲明響應(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：

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
  </div>
</template>


<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count
      }
    }
  }
</script>

#訪問響應(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."