對Vue3中reactive的深入理解

更新時(shí)間：2022年05月25日 08:57:44 作者：山竹回家了

這篇文章主要介紹了對Vue3中reactive的深入理解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue3 reactive的理解

1.什么是reactive?

reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法.
在Vue2中響應(yīng)式數(shù)據(jù)是通過defineProperty來實(shí)現(xiàn)的.
而在Vue3響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實(shí)現(xiàn)的

2.reactive注意點(diǎn)

reactive參數(shù)必須是對象(json/arr)
如果給reactive傳遞了其他對象,默認(rèn)情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.

錯誤示范

當(dāng)傳遞的是非對象時(shí),頁面不會發(fā)生響應(yīng)

在這里插入圖片描述

正確實(shí)例

在這里插入圖片描述

arr正確實(shí)例

傳入數(shù)組會轉(zhuǎn)成proxy對象

在這里插入圖片描述

Vue3筆記 reactive函數(shù)

作用：定義一個(gè)對象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它，要用ref函數(shù)）
語法：const 代理對象= reactive(源對象)接收一個(gè)對象（或數(shù)組），返回一個(gè)代理對象（Proxy的實(shí)例對象，簡稱proxy對象）

reactive定義的響應(yīng)式數(shù)據(jù)是“深層次的”。

內(nèi)部基于 ES6 的 Proxy 實(shí)現(xiàn)，通過代理對象操作源對象內(nèi)部數(shù)據(jù)進(jìn)行操作。

<template>
? <img alt="Vue logo" src="./assets/logo.png" />
? <h1>一個(gè)人的信息</h1>
? <h1>年齡：{{ p.age }}</h1>
? <h1>姓名：{{ p.name }}</h1>
? <h1>工作種類: {{ p.job.type }}</h1>
? <h1>工作薪水: {{ p.job.salary }}</h1>
? <h1>愛好: {{ hobby }}</h1>
? <h1>測試的數(shù)據(jù): {{ p.a.b.c }}</h1>
? <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
? name: "App",
? components: {
? ? HelloWorld,
? },
? setup() {
? ? let hobby = reactive(["抽煙", "喝酒", "打麻將"]);
? ? // 數(shù)據(jù)
? ? let p = reactive({
? ? ? name: "張三",
? ? ? age: 19,
? ? ? job: {
? ? ? ? type: "前端工程師",
? ? ? ? salary: "20k",
? ? ? },
? ? ? a: {
? ? ? ? b: {
? ? ? ? ? c: 666666,
? ? ? ? },
? ? ? },
? ? ? hobby: ["抽煙", "喝酒", "打麻將"],
? ? });

? ? // 方法
? ? function changeInfo() {
? ? ? console.log(p.job);
? ? ? p.name = "李四";
? ? ? p.age = 119;
? ? ? p.job.salary = "69k";
? ? ? p.job.type = "算法工程師";
? ? ? p.hobby[0] = "學(xué)習(xí)";
? ? ? hobby[0] = "學(xué)習(xí)算法";
? ? }
? ? return {
? ? ? p,
? ? ? hobby,
? ? ? changeInfo,
? ? };
? },
};
</script>

總結(jié)一下：