Vue 3高階響應式資料探勘：原理、用法詳解與實戰範例！
在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 物件的變化，當資料變化時會輸出資訊到控制台。