<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 函數的作用：轉換響應式對象中某個屬性為單獨響應式數據，并且轉換后的值和之前是關聯(lián)的（ref 函數也可以轉換，但值非關聯(lián)）。

先看下面這個例子：

<template>
  <div class="container">
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <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">
      <h2>name: {{ name }} </h2>
      <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 函數的作用：轉換響應式對象中所有屬性為單獨響應式數據，并且轉換后的值和之前是關聯(lián)的。

<template>
  <div class="container">
      <h2>{{ name }} {{ age }}</h2>
      <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>