• 新闻资讯
  • Vue 3高階響應式資料探勘：原理、用法詳解與實戰範例！

Vue 3高階響應式資料探勘：原理、用法詳解與實戰範例！

2024.04.10

在Vue 3中，資料的變化透過響應式系統來實現，該系統基於ES6的Proxy物件。 Proxy物件允許攔截並自訂操作，因此Vue可以透過代理物件來實現對資料的監聽和觸發相應的操作。以下是Vue 3中監測資料改變的原理、使用方法和步驟的詳細描述，以及一個實例代碼：

原理：

Vue 3的響應式系統是基於Proxy對象，透過代理對象對資料進行攔截，從而監聽資料的變化。當資料被存取或修改時，Proxy會觸發對應的操作，例如更新視圖。

使用方法：

  • reactive 函數： 使用 reactive 函數建立一個響應式物件。
  • ref 函數： 使用 ref 函數建立一個包含 value 屬性的響應式對象，適用於基本資料型態。
  • toRefs 函數： 將響應式物件轉換為普通物件的響應式參考。
  • watch 函數： 監聽資料的變化，可以在資料變化時執行自訂的回呼函數。

步驟：

步驟1：安裝Vue 3

npm install vue@next
  • 1.

步驟2：建立Vue實例並使用響應式數據

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3高级响应式数据</title>
</head>
<body>
  <div id="app">
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateUser">更新用户</button>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="main.js"></script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

步驟3：編寫Vue實例和響應式資料的JavaScript程式碼

// main.js
import { createApp, reactive, toRefs, watch } from 'vue';

// 创建Vue实例
const app = createApp({
  // 使用响应式数据
  setup() {
    // 创建响应式对象
    const user = reactive({
      name: 'John',
      age: 25
    });

    // 监听响应式数据的变化
    watch(() => {
      console.log('用户信息发生变化:', user.name, user.age);
    });

    // 定义更新用户的方法
    const updateUser = () => {
      // 修改响应式数据
      user.name = 'Jane';
      user.age += 1;
    };

    // 返回响应式对象的引用
    return {
      user: toRefs(user),
      updateUser
    };
  }
});

// 挂载Vue实例到HTML元素上
app.mount('#app');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

在上述高階實例中，我們使用了 reactive 函數建立了一個包含 name 和 age 屬性的響應式物件 user。透過 toRefs 函數，我們將響應式物件轉換為普通物件的響應式引用，使得在範本中能夠直接使用 user.name 和 user.age。同時，我們使用了 watch 函數來監聽 user 物件的變化，當資料變化時會輸出資訊到控制台。