本節(jié)例子中代碼使用的單文件組件語法

#reactive

返回對象的響應式副本

const obj = reactive({ count: 0 })

響應式轉換是“深層”的——它影響所有嵌套 property。在基于 ES2015 Proxy 的實現(xiàn)中，返回的代理是不等于原始對象。建議只使用響應式代理，避免依賴原始對象。

類型聲明：

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

#readonly

獲取一個對象 (響應式或純對象) 或 ref 并返回原始代理的只讀代理。只讀代理是深層的：訪問的任何嵌套 property 也是只讀的。

const original = reactive({ count: 0 })


const copy = readonly(original)


watchEffect(() => {
  // 適用于響應性追蹤
  console.log(copy.count)
})


// 變更original 會觸發(fā)偵聽器依賴副本
original.count++


// 變更副本將失敗并導致警告
copy.count++ // 警告!

#isProxy

檢查對象是 reactive 還是 readonly創(chuàng)建的代理

#isReactive

檢查對象是否是 reactive創(chuàng)建的響應式 proxy。

import { reactive, isReactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'John'
    })
    console.log(isReactive(state)) // -> true
  }
}

如果 proxy 是 readonly 創(chuàng)建的，但還包裝了由 reactive 創(chuàng)建的另一個 proxy，它也會返回 true。

import { reactive, isReactive, readonly } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'John'
    })
    // 從普通對象創(chuàng)建的只讀代理
    const plain = readonly({
      name: 'Mary'
    })
    console.log(isReactive(plain)) // -> false


    // 從響應式代理創(chuàng)建的只讀代理
    const stateCopy = readonly(state)
    console.log(isReactive(stateCopy)) // -> true
  }
}

#isReadonly

檢查對象是否是由readonly創(chuàng)建的只讀代理。

#toRaw

返回 reactive 或 readonly 代理的原始對象。這是一個轉義口，可用于臨時讀取而不會引起代理訪問/跟蹤開銷，也可用于寫入而不會觸發(fā)更改。不建議保留對原始對象的持久引用。請謹慎使用。

const foo = {}
const reactiveFoo = reactive(foo)


console.log(toRaw(reactiveFoo) === foo) // true

#markRaw

標記一個對象，使其永遠不會轉換為代理。返回對象本身。

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false


// 嵌套在其他響應式對象中時也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

WARNING

下方的 markRaw 和 shallowXXX API 使你可以有選擇地選擇退出默認的深度響應式/只讀轉換，并將原始的，非代理的對象嵌入狀態(tài)圖中。它們可以在各種情況下使用：

• 有些值不應被設置為響應式的，例如復雜的第三方類實例或 Vue 組件對象。
• 當渲染具有不可變數(shù)據(jù)源的大列表時，跳過代理轉換可以提高性能。

它們被認為是高階的，因為原始選擇退出僅在根級別，因此，如果將嵌套的、未標記的原始對象設置為響應式對象，然后再次訪問它，則可以得到代理版本。這可能會導致本源危害——即執(zhí)行依賴于對象本身但同時使用同一對象的原始版本和代理版本的操作：

const foo = markRaw({
  nested: {}
})


const bar = reactive({
  // 雖然 `foo` 被標記為原始，foo.nested 不是。
  nested: foo.nested
})


console.log(foo.nested === bar.nested) // false

本源危害通常很少見。然而，為了在安全地避免本源危害的同時正確地使用這些 API，需要對響應性系統(tǒng)的工作原理有一個堅實的理解。

#shallowReactive

創(chuàng)建一個響應式代理，該代理跟蹤其自身 property 的響應性，但不執(zhí)行嵌套對象的深度響應式轉換 (暴露原始值)。

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})


// 改變狀態(tài)本身的性質是響應式的
state.foo++
// ...但是不轉換嵌套對象
isReactive(state.nested) // false
state.nested.bar++ // 非響應式

#shallowReadonly

創(chuàng)建一個代理，使其自身的 property 為只讀，但不執(zhí)行嵌套對象的深度只讀轉換 (暴露原始值)。

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})


// 改變狀態(tài)本身的property將失敗
state.foo++
// ...但適用于嵌套對象
isReadonly(state.nested) // false
state.nested.bar++ // 適用