欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹

 更新時(shí)間:2022年09月24日 14:37:40   作者:前端人  
本文詳細(xì)講解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

ref、isRef、toRef、toRefs、toRaw看著一堆類似的東西,一個(gè)頭兩個(gè)大,今天整理一篇文章詳細(xì)介紹它們的功能及區(qū)別。

1、ref

ref 屬性除了能夠獲取元素外,也可以使用 ref 函數(shù),創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)值發(fā)生改變時(shí),視圖自動(dòng)更新。

<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是張三')
const chang = () => {
  str.value = '我是鉆石王老五'
  console.log(str.value)
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

2、isRef

檢查變量是否為一個(gè)被 ref 包裝過(guò)的對(duì)象,如果是返回 true ,否則返回 false。

import { ref, isRef, reactive } from 'vue'

let str: string = ref('我是張三')
let num: number = 1
let per = reactive({ name: '代碼女神', work: '程序媛' })

console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3、toRef

創(chuàng)建一個(gè) ref 對(duì)象,其 value 值指向另一個(gè)對(duì)象中的某個(gè)屬性。

toRef(obj, key) 將對(duì)象中的某個(gè)值轉(zhuǎn)化為響應(yīng)式數(shù)據(jù),分為兩種情況:

  • toRef 定義原始非響應(yīng)式數(shù)據(jù),修改值時(shí),原始數(shù)據(jù)和 copy 數(shù)據(jù)都會(huì)變的,但是視圖不更新。
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
  name: '姓名',
  age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '鉆石王老五'
  name.value = '李四'
  console.log(obj.name) // 李四
  console.log('name', name) // 李四
}
//chang() //DOM掛載前調(diào)用
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

注意:如果是在 DOM 掛載之前調(diào)用 chang 方法,改變數(shù)值,此時(shí)數(shù)據(jù)和視圖都會(huì)發(fā)生改變。

  • toRef 定義原始數(shù)據(jù)響應(yīng)式數(shù)據(jù),修改值時(shí),原始數(shù)據(jù),和 copy 數(shù)據(jù)都會(huì)改變,視圖也會(huì)更新。
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '鉆石王老五'
  name.value = '李四'
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

最終值為 “李四”。

4、toRefs

toRefs 用來(lái)解構(gòu) ref、reactive 包裹的響應(yīng)式數(shù)據(jù)。接收一個(gè)對(duì)象作為參數(shù),遍歷對(duì)象上的所有屬性,將對(duì)象上的所有屬性變成響應(yīng)式數(shù)據(jù)。

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '鉆石王老五'
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

toRefs 解構(gòu)數(shù)據(jù)時(shí),如果某些參數(shù)作為可選參數(shù),可選參數(shù)不存在時(shí)就會(huì)報(bào)錯(cuò),如:

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '鉆石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

此時(shí)可以使用 toRef 解決此問(wèn)題,使用 toRef 解構(gòu)對(duì)象某個(gè)屬性時(shí),先檢查對(duì)象上是否存在該屬性,如果存在就繼承對(duì)象上的屬性值,如果不存在就會(huì)創(chuàng)建一個(gè)。

修改上邊的代碼為:

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '鉆石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5、toRaw

將響應(yīng)式對(duì)象轉(zhuǎn)為原始對(duì)象。做一些不想被監(jiān)聽(tīng)的事情,從 ref 或 reactive 得到原始數(shù)據(jù)。

修改原響應(yīng)式數(shù)據(jù)時(shí),toRaw 轉(zhuǎn)換得到的數(shù)據(jù)會(huì)被修改,視圖也會(huì)更新,如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '鉆石王老五'
  obj.age++
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
  </div>
</template>

如果修改 toRaw 得到的原始數(shù)據(jù),原數(shù)據(jù)也會(huì)被修改,但是視圖不更新。如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '鉆石王老五'
  obj.age++
}
const changNew = () => {
  newObj.name = '搞笑'
  console.log('newObj', newObj)
  console.log('obj', obj)
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
    <button @click="changNew">修改</button>
  </div>
</template>

 以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

相關(guān)文章

  • vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼

    vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼

    這篇文章主要給大家介紹了vue + canvas實(shí)現(xiàn)涂鴉面板的示例,文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧
    2023-08-08
  • 通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄

    通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄

    這篇文章主要給大家介紹了關(guān)于通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • vue 綁定對(duì)象,數(shù)組之?dāng)?shù)據(jù)無(wú)法動(dòng)態(tài)渲染案例詳解

    vue 綁定對(duì)象,數(shù)組之?dāng)?shù)據(jù)無(wú)法動(dòng)態(tài)渲染案例詳解

    這篇文章主要介紹了vue 綁定對(duì)象,數(shù)組之?dāng)?shù)據(jù)無(wú)法動(dòng)態(tài)渲染案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容

    vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue3.0之Router的使用你了解嗎

    vue3.0之Router的使用你了解嗎

    這篇文章主要為大家詳細(xì)介紹了vue3.0之Router的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-03-03
  • vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法(實(shí)例代碼)

    vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法(實(shí)例代碼)

    這篇文章主要介紹了vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • VUE2.0+Element-UI+Echarts封裝的組件實(shí)例

    VUE2.0+Element-UI+Echarts封裝的組件實(shí)例

    下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù)詳解

    Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù)詳解

    這篇文章主要介紹了Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-03-03
  • Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • Vue 列表渲染 key的原理和作用詳解

    Vue 列表渲染 key的原理和作用詳解

    這篇文章主要介紹了key在Vue列表渲染時(shí)的原理和作用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-10-10

最新評(píng)論