Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析

這篇“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”文章吧。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的雙江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

reactive

為什么有這個(gè)屬性了，其實(shí)我猜測(cè)是為了滿足不同團(tuán)隊(duì)的寫代碼風(fēng)格，因?yàn)橛械膱F(tuán)隊(duì)可能喜歡如下方式：

const x = 10;

const y = 20;

有的團(tuán)隊(duì)則喜歡這種方式：

const obj = {

    x: 10,

    y: 20

}

而 reactive 則是為了滿足第二種情況的團(tuán)隊(duì)，返回對(duì)象的響應(yīng)式副本，響應(yīng)式轉(zhuǎn)換是深層的，它會(huì)影響對(duì)象的屬性，返回的 proxy 是不等于原始對(duì)象的，所以我們建議使用 proxy ，避免依賴原始對(duì)象。

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    return {

      obj

    }

  },

}

</script>

readonly

根據(jù)英文單詞的字面就知道這個(gè)方法代表只讀，可以將一個(gè)原始的對(duì)象，或者是響應(yīng)式對(duì)象，或者是 ref 返回的副本對(duì)象，我們知道響應(yīng)式轉(zhuǎn)換是深層的，會(huì)影響到深層屬性，所以對(duì)象的任何屬性都是只讀的：

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追蹤 obj", obj.x)

    })

    obj.x++ // 會(huì)進(jìn)行加法運(yùn)算

    readonlyObj.x++ // 發(fā)生警告

    return {

      obj

    }

  },

}

</script>

isProxy

用于檢測(cè)對(duì)象是否被 reactive 或者readonly 創(chuàng)建的 proxy

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect,

  isProxy,

  isReactive,

  isReadonly

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追蹤 obj", obj.x)

    })

    console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))

    console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))

    console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))

    obj.x++ // 會(huì)進(jìn)行加法運(yùn)算

    readonlyObj.x++ // 發(fā)生警告

    return {

      obj

    }

  },

}

</script>

isReactive

檢測(cè)對(duì)象是否是 reactive 創(chuàng)建的響應(yīng)式對(duì)象：

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect,

  isProxy,

  isReactive,

  isReadonly

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追蹤 obj", obj.x)

    })

    console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))

    console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))

    console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))

    obj.x++ // 會(huì)進(jìn)行加法運(yùn)算

    readonlyObj.x++ // 發(fā)生警告

    return {

      obj

    }

  },

}

</script>

isReadonly

檢測(cè)對(duì)象是否是 readonly 創(chuàng)建的只讀對(duì)象：

console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))

toRaw

返回 reactive 或者 readonly proxy 的原始對(duì)象，

const xt = {}

const xy = reactive(xt)

console.log("toRaw===>", toRaw(xy) == xt) // true

markRaw

標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)轉(zhuǎn)換為 proxy 響應(yīng)式對(duì)象：

const foo = markRaw({})

console.log(isReactive(reactive(foo))) // false

shallowReactive

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

const state = shallowReactive({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變狀態(tài)本身的性質(zhì)是響應(yīng)式的

state.foo++

// ...但是不轉(zhuǎn)換嵌套對(duì)象

isReactive(state.nested) // false

state.nested.bar++ // 非響應(yīng)式

shallowReadonly

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

const state = shallowReadonly({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變狀態(tài)本身的property將失敗

state.foo++

// ...但適用于嵌套對(duì)象

isReadonly(state.nested) // false

state.nested.bar++ // 適用

以上就是關(guān)于“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析
本文來(lái)源：http://bm7419.com/article38/ipddsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站內(nèi)鏈、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)