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

簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs

 更新時(shí)間:2023年04月03日 14:33:41   作者:初映CY的前說(shuō)  
這篇文章主要是想和大家來(lái)簡(jiǎn)單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下

一、ref

ref 函數(shù),可以把簡(jiǎn)單數(shù)據(jù)類型包裹為響應(yīng)式數(shù)據(jù)(復(fù)雜類型也可以),注意 JS 中操作值的時(shí)候,需要加 .value 屬性,模板中正常使用即可。

舉個(gè)例子:

ref包裝基本類型數(shù)據(jù)

App.vue

<template>
  <div class="container">
      <div>{{ name }}</div>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
      name: 'App',
      setup() {
          const name = ref('初映')
          const updateName = () => {
              name.value = '初映CY的前說(shuō)'
          }
          return { name, updateName }
      },
  }
</script>

可看見(jiàn)寫(xiě)法與reactive()一樣,不過(guò)是在js中書(shū)寫(xiě)的時(shí)候需要額外加一個(gè).value即可

ref包裝復(fù)雜類類型數(shù)據(jù)

注意:ref 其實(shí)也可以包裹復(fù)雜數(shù)據(jù)類型為響應(yīng)式數(shù)據(jù),一般對(duì)于數(shù)據(jù)類型未確定的情況下推薦使用 ref,例如后端返回的數(shù)據(jù)。

<template>
    <div class="container">
        <div>{{ data?.name }}</div>
        <button @click="updateName">修改數(shù)據(jù)</button>
    </div>
</template>
<script>
    import { ref } from 'vue'
    export default {
        name: 'App',
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右邊的對(duì)象可能是后端返回的
                data.value = {
                    name: '初映',
                }
            }, 1000)
            const updateName = () => {
                data.value.name = 'CY'
            }
            return { data, updateName }
        },
    }
</script>

如何選擇?

ref()和reactive()都是Vue.js3.0中提供的兩個(gè)響應(yīng)式API。

ref()主要用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),它會(huì)將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式的對(duì)象,從而使數(shù)據(jù)的變化可以被Vue實(shí)例所追蹤,當(dāng)數(shù)據(jù)發(fā)生變化時(shí),Vue會(huì)自動(dòng)更新相關(guān)視圖。ref()創(chuàng)建的響應(yīng)式數(shù)據(jù)可以通過(guò).value屬性來(lái)訪問(wèn)和修改。

reactive()則主要用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象,可以用作包含多個(gè)值的狀態(tài)對(duì)象,通常用于管理復(fù)雜的狀態(tài)。它可以將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式對(duì)象,并且支持嵌套屬性,即使嵌套屬性發(fā)生變化也會(huì)被Vue實(shí)例所追蹤。當(dāng)響應(yīng)式對(duì)象中有任何一個(gè)屬性發(fā)生變化時(shí),Vue也會(huì)自動(dòng)更新相關(guān)的視圖。

當(dāng)你明確知道需要包裹的是一個(gè)對(duì)象,那么推薦使用 reactive,其他情況使用 ref 即可。

Vue3.2 之后,更推薦使用 ref,性能得到了很大的提升。

二、toRef

toRef 函數(shù)的作用:轉(zhuǎn)換響應(yīng)式對(duì)象中某個(gè)屬性為單獨(dú)響應(yīng)式數(shù)據(jù),并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的(ref 函數(shù)也可以轉(zhuǎn)換,但值非關(guān)聯(lián))。

先看下面這個(gè)例子:

<template>
  <div class="container">
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
          }
          return { obj, updateName }
      },
  }
</script>

這樣寫(xiě)也可以將數(shù)據(jù)進(jìn)行更改成為響應(yīng)式的數(shù)據(jù),但是帶來(lái)了兩個(gè)問(wèn)題:

問(wèn)題 1:模板中都要使用 obj. 進(jìn)行獲取數(shù)據(jù),麻煩。

問(wèn)題 2:明明模板中只用到了 name 和 age,卻把整個(gè) obj 進(jìn)行了導(dǎo)出,沒(méi)必要,性能浪費(fèi)。

<template>
  <div class="container">
      <h2>name: {{ name }} </h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive,toRef  } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const name = toRef(obj, 'name')
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
          }
          return { name, updateName }
      },
  }
</script>

這樣把我們需要的數(shù)據(jù)放進(jìn)return即可,節(jié)約了性能與在模板中的寫(xiě)法,有點(diǎn)點(diǎn)了‘按需導(dǎo)入’的意思

三、torefs

toRefs 函數(shù)的作用:轉(zhuǎn)換響應(yīng)式對(duì)象中所有屬性為單獨(dú)響應(yīng)式數(shù)據(jù),并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的。

<template>
  <div class="container">
      <h2>{{ name }} {{ age }}</h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 10,
          })
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }
</script>

toRefs將我們所有的響應(yīng)式數(shù)據(jù)都進(jìn)行return出去了,屆時(shí)直接用上數(shù)據(jù)名稱即可,記得加上…喔

到此這篇關(guān)于簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs的文章就介紹到這了,更多相關(guān)Vue ref toRef toRefs內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論