ref - daniel-qa/Vue GitHub Wiki

响应式引用（Reactive Reference）

const debugData = ref({ key: 'value' });

const debugData = ref('tmp');
  • 兩段程式碼的差異
  1. 儲存資料類型不同
const debugData = ref({ key: 'value' });

這裡將一個物件 { key: 'value' } 作為初始值傳給 ref。

這個物件包含了一個屬性 key，其值為 value。

適合用來儲存複雜的資料結構，例如包含多個屬性的物件、陣列等。

const debugData = ref('tmp');:

這裡將一個字串 'tmp' 作為初始值傳給 ref。

適合用來儲存簡單的資料類型，例如字串、數字、布林值。

在 Vue 3 中，响应式引用是一个用于创建响应式状态的概念，主要通过 ref 函数实现。它使得我们能够在组件的模板和计算属性中自动跟踪和反应数据的变化。

你使用 ref 創建一個變數時，它實際上是包裹在一個 Ref 物件中的，這個物件有一個 .value 屬性來儲存實際的數據。

因此，ref 本身是對一個值的引用，而 .value 則是引用的實際值。

主要特性

  1. 基本数据类型的响应性：

    • 使用 ref 创建的响应式引用可以跟踪基本数据类型（如数字、字符串、布尔值等）的变化。
    • 例如： 
      import { ref } from 'vue';

let count = ref(0);
count.value++; // 通过 .value 访问和修改

  2. 自动更新：

    • 当引用的值变化时，依赖它的模板和计算属性会自动更新，保持 UI 和数据状态的同步。
    • 例如，在模板中使用： 
      <template>
  <div>{{ count }}</div>
  <button @click="count++">Increase</button>
</template>

  3. 组合式 API：

    • 响应式引用是 Vue 3 的组合式 API 的一部分，允许开发者在函数中更灵活地管理状态。
    • 可以与其他响应式 API（如 reactive）结合使用，适应不同的需求。

与 reactive 的区别

  • ref 用于创建单一的响应式值，适用于基本数据类型。

  • reactive 用于创建响应式对象，适用于复杂数据结构（如对象和数组）。

    import { reactive, ref } from 'vue';

let state = reactive({ count: 0 }); // 响应式对象
let name = ref('John'); // 响应式引用
⚠️ **GitHub.com Fallback** ⚠️