vue3中的ref、toRef、toRefs怎么使用

這篇文章主要講解了“vue3中的ref、toRef、toRefs怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue3中的ref、toRef、toRefs怎么使用”吧！

創(chuàng)新互聯是專業(yè)的福州網站建設公司，福州接單;提供網站設計、成都網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行福州網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

一、ref

ref 函數，可以把簡單數據類型包裹為響應式數據（復雜類型也可以），注意 JS 中操作值的時候，需要加 .value 屬性，模板中正常使用即可。
舉個例子：

• ref包裝基本類型數據
  App.vue

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

可看見寫法與reactive()一樣，不過是在js中書寫的時候需要額外加一個.value即可。

• ref包裝復雜類類型數據
  注意：ref 其實也可以包裹復雜數據類型為響應式數據，一般對于數據類型未確定的情況下推薦使用 ref，例如后端返回的數據。

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

• 如何選擇？
  ref()和reactive()都是Vue.js3.0中提供的兩個響應式API。
  ref()主要用于創(chuàng)建一個響應式數據，它會將一個普通的JavaScript對象轉換為一個響應式的對象，從而使數據的變化可以被Vue實例所追蹤，當數據發(fā)生變化時，Vue會自動更新相關視圖。ref()創(chuàng)建的響應式數據可以通過.value屬性來訪問和修改。
  reactive()則主要用于創(chuàng)建一個響應式對象，可以用作包含多個值的狀態(tài)對象，通常用于管理復雜的狀態(tài)。它可以將一個普通的JavaScript對象轉換為一個響應式對象，并且支持嵌套屬性，即使嵌套屬性發(fā)生變化也會被Vue實例所追蹤。當響應式對象中有任何一個屬性發(fā)生變化時，Vue也會自動更新相關的視圖。
  當你明確知道需要包裹的是一個對象，那么推薦使用 reactive，其他情況使用 ref 即可。
  Vue3.2 之后，更推薦使用 ref，性能得到了很大的提升。

二、toRef

toRef 函數的作用：轉換響應式對象中某個屬性為單獨響應式數據，并且轉換后的值和之前是關聯的（ref 函數也可以轉換，但值非關聯）。
先看下面這個例子：

<template>
  <div class="container">
      <h3>name: {{ obj.name }} age: {{obj.age}}</h3>
      <button @click="updateName">修改數據</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的前說'
          }
          return { obj, updateName }
      },
  }</script>

這樣寫也可以將數據進行更改成為響應式的數據，但是帶來了兩個問題：

• 問題 1：模板中都要使用 obj. 進行獲取數據，麻煩。

• 問題 2：明明模板中只用到了 name 和 age，卻把整個 obj 進行了導出，沒必要，性能浪費。

<template>
  <div class="container">
      <h3>name: {{ name }} </h3>
      <button @click="updateName">修改數據</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的前說'
          }
          return { name, updateName }
      },
  }</script>

這樣把我們需要的數據放進return即可，節(jié)約了性能與在模板中的寫法，有點點了‘按需導入’的意思

三、torefs

toRefs 函數的作用：轉換響應式對象中所有屬性為單獨響應式數據，并且轉換后的值和之前是關聯的。

<template>
  <div class="container">
      <h3>{{ name }} {{ age }}</h3>
      <button @click="updateName">修改數據</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的前說'
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs將我們所有的響應式數據都進行return出去了，屆時直接用上數據名稱即可，記得加上…喔

感謝各位的閱讀，以上就是“vue3中的ref、toRef、toRefs怎么使用”的內容了，經過本文的學習后，相信大家對vue3中的ref、toRef、toRefs怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

當前標題：vue3中的ref、toRef、toRefs怎么使用
文章源于：http://muchs.cn/article46/ispshg.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制開發(fā)、營銷型網站建設、網站營銷、品牌網站設計、手機網站建設、響應式網站

廣告

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