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

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：展覽展示等成都網(wǎng)站設(shè)計(jì)、成都全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

#reactive

返回對象的響應(yīng)式副本

const obj = reactive({ count: 0 })

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

類型聲明：

function reactive(target: T): UnwrapNestedRefs

#readonly

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

const original = reactive({ count: 0 })


const copy = readonly(original)


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


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


// 變更副本將失敗并導(dǎo)致警告
copy.count++ // 警告!

#isProxy

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

#isReactive

檢查對象是否是 reactive創(chuàng)建的響應(yī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)建的另一個(gè) proxy，它也會(huì)返回 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


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

#isReadonly

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

#toRaw

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

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


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

#markRaw

標(biāo)記一個(gè)對象，使其永遠(yuǎn)不會(huì)轉(zhuǎn)換為代理。返回對象本身。

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


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

WARNING

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

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

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

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


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


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

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

#shallowReactive

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

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


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

#shallowReadonly

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

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


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

名稱欄目：創(chuàng)新互聯(lián)VUE3教程：Vue 3.0 響應(yīng)性基礎(chǔ) API
文章來源：http://uogjgqi.cn/article/djcpphg.html