vue3 全家桶 - ref 與 reactive 區別

響應式數據

配合新的 setup 函式,偵測響應式數據的方法有 ref 與 reactive,響應式數據就是在數據變化時可以敏銳偵測到,並且隨之變動 virtual dom,達到 MVVM 的資料締結。

ref 函式

取代 data 函式,返回一個代理對象

ref 接受所有型別的數據,並且將資料包裝成一個代理,需要透過 .value 取得原始資料的數據,但須注意的是代理取得的值並非原始數據:

ref
1
2
3
4
let str = '字串';
let refStr = ref(str);
console.log( str === refStr.value ); // false
console.log( refStr ); // 返回代理對象

模板訪問 ref 無須透過 .value

在 html template 中代理數據可以直接使用變數名稱取得:

ref
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
...
<h1>My favorite food is .</h1>
</template>

<script>
import { ref } from 'vue';
export default {
setup () {
const apple = ref('apple');
return { apple };
}
}
</script>

reactive 函式

只接受 object & array 形式的資料

若給予 reactive 原始型別的數據,會噴錯誤訊息。

監聽深層資料變化

物件內部資料變化 ref 無法偵測到,不會觸發 watch 乃至重新渲染 virtual dom:

AMP 加速行動裝置網頁介紹 vue3 全家桶 - 理解組件化(composition API)

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×