快捷導(dǎo)航

Vue 中 reactive創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)的方法

更新時(shí)間：2025年02月21日 10:06:10 作者：阿賈克斯的黎明

在 Vue 的開發(fā)世界里,響應(yīng)式數(shù)據(jù)是構(gòu)建交互性良好應(yīng)用的基礎(chǔ),之前我們了解了ref用于定義基本類型的數(shù)據(jù),今天就來深入探討一下如何使用reactive定義對(duì)象類型的響應(yīng)式數(shù)據(jù),感興趣的朋友一起看看吧

在 Vue 的開發(fā)世界里，響應(yīng)式數(shù)據(jù)是構(gòu)建交互性良好應(yīng)用的基礎(chǔ)。之前我們了解了ref用于定義基本類型的數(shù)據(jù)，今天就來深入探討一下如何使用reactive定義對(duì)象類型的響應(yīng)式數(shù)據(jù)。

一、從普通對(duì)象到響應(yīng)式對(duì)象

假設(shè)我們要展示汽車的信息，先創(chuàng)建一個(gè)普通的汽車對(duì)象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Example</title>
</head>
<body>
    <div id="app">
        <p>一輛{{ car.brand }}車價(jià)值{{ car.price }}萬</p>
        <button @click="changePrice">修改汽車的價(jià)格</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 定義普通汽車對(duì)象
                let car = {
                    brand: '奔馳',
                    price: 100
                };
                const changePrice = () => {
                    car.price += 10;
                };
                return {
                    car,
                    changePrice
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

在上述代碼中，我們定義了一個(gè)car對(duì)象，并嘗試在按鈕點(diǎn)擊時(shí)修改價(jià)格。但運(yùn)行代碼后會(huì)發(fā)現(xiàn)，點(diǎn)擊按鈕，頁面上汽車的價(jià)格并不會(huì)更新。這是因?yàn)?code>car只是一個(gè)普通對(duì)象，Vue 無法追蹤其變化。

這時(shí)，reactive就派上用場(chǎng)了。我們只需要將普通對(duì)象用reactive包裹起來，就能讓它變成響應(yīng)式對(duì)象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Example</title>
</head>
<body>
    <div id="app">
        <p>一輛{{ car.brand }}車價(jià)值{{ car.price }}萬</p>
        <button @click="changePrice">修改汽車的價(jià)格</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive創(chuàng)建響應(yīng)式汽車對(duì)象
                const car = reactive({
                    brand: '奔馳',
                    price: 100
                });
                const changePrice = () => {
                    car.price += 10;
                };
                return {
                    car,
                    changePrice
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后的代碼，當(dāng)點(diǎn)擊按鈕時(shí)，頁面上汽車的價(jià)格會(huì)隨之更新。這就是reactive的神奇之處，它能將普通對(duì)象轉(zhuǎn)化為響應(yīng)式對(duì)象，Vue 可以追蹤其變化并更新視圖。

二、reactive 與 Proxy

當(dāng)我們使用reactive包裹對(duì)象后，在控制臺(tái)打印這個(gè)對(duì)象，會(huì)發(fā)現(xiàn)它變成了一個(gè)Proxy。Proxy是原生 JS 提供的功能，不需要引入第三方庫。它就像是一個(gè)代理，在訪問和修改對(duì)象屬性時(shí)起到攔截和處理的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Proxy</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { reactive } = Vue;
        const car = reactive({
            brand: '奔馳',
            price: 100
        });
        console.log(car);
    </script>
</body>
</html>

在控制臺(tái)查看打印結(jié)果，會(huì)看到Proxy相關(guān)的信息。我們真正的數(shù)據(jù)其實(shí)藏在target屬性里，但平時(shí)開發(fā)中，直接查看藍(lán)色顯示的屬性部分就可以獲取和修改數(shù)據(jù)，不用深入探究Proxy內(nèi)部結(jié)構(gòu)。

三、處理數(shù)組類型的響應(yīng)式數(shù)據(jù)

在 JavaScript 中，數(shù)組也屬于對(duì)象范疇，reactive同樣可以將數(shù)組轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)。比如，我們要展示一個(gè)游戲列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Array</title>
</head>
<body>
    <div id="app">
        <h2>游戲列表</h2>
        <ul>
            <li v-for="game in games" :key="game.id">{{ game.name }}</li>
        </ul>
        <button @click="changeFirstGame">修改第一個(gè)游戲的名字</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 定義普通游戲數(shù)組
                let games = [
                    { id: '01', name: '王者榮耀' },
                    { id: '02', name: '原神' },
                    { id: '03', name: '三國(guó)志' }
                ];
                const changeFirstGame = () => {
                    games[0].name = '流星蝴蝶劍';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

上述代碼中，我們嘗試在按鈕點(diǎn)擊時(shí)修改第一個(gè)游戲的名字，但直接運(yùn)行會(huì)發(fā)現(xiàn)頁面并不會(huì)更新。這是因?yàn)?code>games數(shù)組是普通數(shù)組，不是響應(yīng)式的。

使用reactive將數(shù)組變成響應(yīng)式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Array</title>
</head>
<body>
    <div id="app">
        <h2>游戲列表</h2>
        <ul>
            <li v-for="game in games" :key="game.id">{{ game.name }}</li>
        </ul>
        <button @click="changeFirstGame">修改第一個(gè)游戲的名字</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive創(chuàng)建響應(yīng)式游戲數(shù)組
                const games = reactive([
                    { id: '01', name: '王者榮耀' },
                    { id: '02', name: '原神' },
                    { id: '03', name: '三國(guó)志' }
                ]);
                const changeFirstGame = () => {
                    games[0].name = '流星蝴蝶劍';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后，點(diǎn)擊按鈕，頁面上第一個(gè)游戲的名字就會(huì)更新，這體現(xiàn)了reactive處理數(shù)組響應(yīng)式的能力。

四、reactive 的深層次響應(yīng)

reactive定義的響應(yīng)式數(shù)據(jù)是深層次的，也就是說，無論對(duì)象的層級(jí)有多深，它都能追蹤到數(shù)據(jù)的變化。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div id="app">
        <h2>測(cè)試</h2>
        <p>{{ obj.a.b.c }}</p>
        <button @click="changeObj">修改數(shù)據(jù)</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 定義多層級(jí)普通對(duì)象
                let obj = {
                    a: {
                        b: {
                            c: '法號(hào)666'
                        }
                    }
                };
                const changeObj = () => {
                    obj.a.b.c = '法號(hào)999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

上述代碼中，直接修改多層級(jí)對(duì)象的屬性，頁面不會(huì)更新。使用reactive包裹對(duì)象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div id="app">
        <h2>測(cè)試</h2>
        <p>{{ obj.a.b.c }}</p>
        <button @click="changeObj">修改數(shù)據(jù)</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive創(chuàng)建響應(yīng)式多層級(jí)對(duì)象
                const obj = reactive({
                    a: {
                        b: {
                            c: '法號(hào)666'
                        }
                    }
                });
                const changeObj = () => {
                    obj.a.b.c = '法號(hào)999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后，點(diǎn)擊按鈕，頁面上的數(shù)據(jù)會(huì)隨著對(duì)象屬性的改變而更新，證明了reactive的深層次響應(yīng)特性。

通過以上內(nèi)容，我們?nèi)媪私饬?Vue 中reactive創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)的用法，無論是普通對(duì)象、數(shù)組還是多層級(jí)對(duì)象，reactive都能讓它們具備響應(yīng)式能力，為我們開發(fā)高效、交互性強(qiáng)的 Vue 應(yīng)用提供了有力支持。

到此這篇關(guān)于Vue 中 reactive：創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)的利器的文章就介紹到這了,更多相關(guān)Vue reactive響應(yīng)式數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: