對(duì)Vue3中reactive的深入理解
更新時(shí)間：2022年05月25日 08:57:44 作者：山竹回家了
這篇文章主要介紹了對(duì)Vue3中reactive的深入理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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ù)必須是對(duì)象(json/arr)
- 如果給reactive傳遞了其他對(duì)象,默認(rèn)情況下修改對(duì)象,界面不會(huì)自動(dòng)更新,如果想更新,可以通過重新賦值的方式.
錯(cuò)誤示范
- 當(dāng)傳遞的是非對(duì)象時(shí),頁面不會(huì)發(fā)生響應(yīng)
正確實(shí)例
arr正確實(shí)例
- 傳入數(shù)組會(huì)轉(zhuǎn)成proxy對(duì)象
Vue3筆記 reactive函數(shù)
- 作用：定義一個(gè)對(duì)象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它，要用ref函數(shù)）
- 語法：const 代理對(duì)象= reactive(源對(duì)象)接收一個(gè)對(duì)象（或數(shù)組），返回一個(gè)代理對(duì)象（Proxy的實(shí)例對(duì)象，簡(jiǎn)稱proxy對(duì)象）
reactive定義的響應(yīng)式數(shù)據(jù)是“深層次的”。
內(nèi)部基于 ES6 的 Proxy 實(shí)現(xiàn)，通過代理對(duì)象操作源對(duì)象內(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>測(cè)試的數(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é)一下：
- reactive主要是用來操作對(duì)象或數(shù)組，定義為響應(yīng)式數(shù)據(jù)
- 增刪改查都可以操作。
- 內(nèi)部是通過Proxy代理的形式
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一份超級(jí)詳細(xì)的Vue-cli3.0使用教程【推薦】
這篇文章主要介紹了一份超級(jí)詳細(xì)的Vue-cli3.0使用教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)密碼顯示隱藏功能的思路詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實(shí)現(xiàn)本地文件的存取,需要的小伙伴可以參考下2023-11-11
Vue SPA 初次進(jìn)入加載動(dòng)畫實(shí)現(xiàn)代碼
今天小編就為大家分享一篇Vue SPA 初次進(jìn)入加載動(dòng)畫實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue前端框架搭建過程，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序
表格中有時(shí)候會(huì)有排序的需求,下面這篇文章主要給大家介紹了關(guān)于element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue 集成 storybook的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
使用electron將vue-cli項(xiàng)目打包成exe的方法
今天小編就為大家分享一篇使用electron將vue-cli項(xiàng)目打包成exe的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式
這篇文章主要為大家詳細(xì)介紹了vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07