Vue3初探之ref、reactive以及改變數(shù)組的值

更新時間：2022年09月21日 12:01:16 作者：風隨心飛飛

在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來創(chuàng)建響應式數(shù)據(jù),下面這篇文章主要給大家介紹了關于Vue3初探之ref、reactive以及改變數(shù)組值的相關資料,需要的朋友可以參考下

概況

Vue3 里要實現(xiàn)數(shù)據(jù)的響應式監(jiān)聽一共有兩種方式既：ref 和 reactive

他們既有區(qū)別又有聯(lián)系。

ref()

ref數(shù)據(jù)響應式監(jiān)聽。ref 函數(shù)傳入一個值作為參數(shù)，一般傳入基本數(shù)據(jù)類型，返回一個基于該值的響應式Ref對象，該對象中的值一旦被改變和訪問，都會被跟蹤到，就像我們改寫后的示例代碼一樣，通過修改 count.value 的值，可以觸發(fā)模板的重新渲染，顯示最新的值

reactive()

reactive

reactive 是 Vue3 中提供的實現(xiàn)響應式數(shù)據(jù)的?法。

在 Vue2 中響應式數(shù)據(jù)是通過 defineProperty 來實現(xiàn)的，在 Vue3 中響應式數(shù)據(jù)是通過 ES6 的 Proxy 來實現(xiàn)的。具體參照，。

reactive 參數(shù)必須是對象 (json / arr)

本質: 就是將傳?的數(shù)據(jù)包裝成?個Proxy對象

如果給 reactive 傳遞了其它對象（如Date對象）

默認情況下，修改對象?法實現(xiàn)界?的數(shù)據(jù)綁定更新。

如果需要更新，需要進?重新賦值。（即不允許直接操作數(shù)據(jù)，需要放個新的數(shù)據(jù)來替代原數(shù)據(jù)）

在 reactive 使?基本類型參數(shù)

基本類型（數(shù)字、字符串、布爾值）在 reactive 中?法被創(chuàng)建成 proxy 對象，也就?法實現(xiàn)監(jiān)聽。?法實現(xiàn)響應式

<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive(0)
function c() {
console.log(msg);
msg ++;
}
return {
msg,
c
};
}
}
</script>

點擊 button ，我們期望的結果是數(shù)字從 0 變成 1，然?實際上界?上的數(shù)字并沒有發(fā)?任何改變。

查看控制臺，它的輸出是這樣的（我點了 3 次）

出現(xiàn)提?

value cannot be made reactive: 0

?輸出的值確實發(fā)?了變化，只不過這種變化并沒有反饋到界?上，也就是說并沒有實現(xiàn)雙向數(shù)據(jù)綁定。當然，如果是 ref 的話，就不存在
這樣的問題。?如果要使? reactive ，我們需要將參數(shù)從基本類型轉化為對象。

<template>
<div>
<p>{{msg.num}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: 0
})
function c() {
console.log(msg);
msg.num ++;
}
return {
msg,
c
};
}
}
</script>

將參數(shù)替換成了對象 {num: 0}，此時，點擊按鈕界?就會產?改變（我點了 3 次）。

在控制臺打印消息

可以看到，msg 成功被創(chuàng)建成了 proxy 對象，他通過劫持對象的 get 和 set ?法實現(xiàn)了對象的雙向數(shù)據(jù)綁定。

深層的、對象內部的變化也能被察覺到（注意下?代碼中的 inner ）

<template>
<div>
<p>{{msg.num.inner}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: {
inner: 0
}
})
function c() {
console.log(msg);
msg.num.inner ++;
}
return {
msg,
c
};
}
}
</script>

數(shù)組變化也不在話下。

<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive([1, 2, 3])
function c() {
console.log(msg);
msg[0] += 1;
msg[1] = 5;
}
return {
msg,
c
};
}
}
</script>

在 reactive 使? Date 參數(shù)

如果參數(shù)不是數(shù)組、對象，?是稍微奇怪?點的數(shù)據(jù)類型，例如說 Date ，那么?煩?來了。

<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive(new Date())
function c() {
console.log(msg);
msg.setDate(msg.getDate() + 1);
console.log(msg);
}
return {
msg,
c
};
}
}
</script>

這?我先打印了 msg 兩次，可以看到，點擊?次 button ，msg 的數(shù)據(jù)是存在變化的，但界?并未發(fā)?變化，同時我們發(fā)現(xiàn)在控制臺
?，msg 并未被識別成 proxy。

就算我們把 Date 放在對象?，就像這樣

<template>
<div>
<p>{{msg.date}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
console.log(msg);
msg.date.setDate(msg.date.getDate() + 1);
console.log(msg);
}
return {
msg,
c
};
}
}
</script>

也仍然不起效果。

顯然，對于這種數(shù)據(jù)類型，我們需要做特殊處理。

這個特殊處理就是重新賦值（，?不是直接修改原來的值）。

<template>
<div>
<p>{{msg.date}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
console.log(msg);
msg.date.setDate((msg.date.getDate() + 1));
msg.date = new Date(msg.date);
console.log(msg);
}
return {
msg,
c
};
}
}
</script>

這?我采?了拷貝的?案重新賦值了 msg.date，界?成功發(fā)?了變化（?期 + 1）。