Vue3響應性基礎API實例分析

這篇“Vue3響應性基礎API實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue3響應性基礎API實例分析”文章吧。

響應性基礎 API

reactive

為什么有這個屬性了，其實我猜測是為了滿足不同團隊的寫代碼風格，因為有的團隊可能喜歡如下方式：

const x = 10;

const y = 20;

有的團隊則喜歡這種方式：

const obj = {

    x: 10,

    y: 20

}

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

<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

根據英文單詞的字面就知道這個方法代表只讀，可以將一個原始的對象，或者是響應式對象，或者是 ref 返回的副本對象，我們知道響應式轉換是深層的，會影響到深層屬性，所以對象的任何屬性都是只讀的：

<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++ // 會進行加法運算

    readonlyObj.x++ // 發生警告

    return {

      obj

    }

  },

}

</script>

isProxy

用于檢測對象是否被 reactive 或者readonly 創建的 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++ // 會進行加法運算

    readonlyObj.x++ // 發生警告

    return {

      obj

    }

  },

}

</script>

isReactive

檢測對象是否是 reactive 創建的響應式對象：

<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++ // 會進行加法運算

    readonlyObj.x++ // 發生警告

    return {

      obj

    }

  },

}

</script>

isReadonly

檢測對象是否是 readonly 創建的只讀對象：

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

toRaw

返回 reactive 或者 readonly proxy 的原始對象，

const xt = {}

const xy = reactive(xt)

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

markRaw

標記一個對象，使其永遠不會轉換為 proxy 響應式對象：

const foo = markRaw({})

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

shallowReactive

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

const state = shallowReactive({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變狀態本身的性質是響應式的

state.foo++

// ...但是不轉換嵌套對象

isReactive(state.nested) // false

state.nested.bar++ // 非響應式

shallowReadonly

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

const state = shallowReadonly({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變狀態本身的property將失敗

state.foo++

// ...但適用于嵌套對象

isReadonly(state.nested) // false

state.nested.bar++ // 適用

以上就是關于“Vue3響應性基礎API實例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。