SoFunction
Updated on 2025-04-13

Methods for reactive to create object-type responsive data in Vue

In the development world of Vue, responsive data is the basis for building interactive applications. We've learned about it beforerefUsed to define basic types of data, let’s explore in depth how to use it todayreactiveResponsive data that defines the object type.

1. From normal objects to responsive objects

Suppose we want to display the information of the car, first create a normal car object:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Example</title>
</head>
<body>
    <div >
        <p>One{{  }}Car value{{  }}Ten thousand</p>
        <button @click="changePrice">Modify the price of the car</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Define ordinary car objects                let car = {
                    brand: 'Benz',
                    price: 100
                };
                const changePrice = () => {
                     += 10;
                };
                return {
                    car,
                    changePrice
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

In the above code, we define acarobject and try to modify the price when the button is clicked. But after running the code, you will find that when you click the button, the price of the car on the page will not be updated. This is becausecarJust a normal object, Vue cannot track its changes.

At this time,reactiveIt comes in handy. We just need to use normal objectsreactiveWrap it up and it becomes a responsive object:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Example</title>
</head>
<body>
    <div >
        <p>One{{  }}Car value{{  }}Ten thousand</p>
        <button @click="changePrice">Modify the price of the car</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Create reactive car objects using reactive                const car = reactive({
                    brand: 'Benz',
                    price: 100
                });
                const changePrice = () => {
                     += 10;
                };
                return {
                    car,
                    changePrice
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

The modified code, when the button is clicked, the price of the car on the page will be updated accordingly. This isreactiveThe magic of , it can convert normal objects into responsive objects , Vue can track their changes and update views .

2. Reactive and Proxy

When we usereactiveAfter wrapping the object, print the object on the console and you will find that it has become aProxy。ProxyIt is a function provided by native JS and does not require the introduction of third-party libraries. It is like a proxy that intercepts and processes when accessing and modifying object properties.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Proxy</title>
</head>
<body>
    <script src="/vue@3/dist/"></script>
    <script>
        const { reactive } = Vue;
        const car = reactive({
            brand: 'Benz',
            price: 100
        });
        (car);
    </script>
</body>
</html>

Check the print results on the console and you will seeProxyRelated information. Our real data is actually hiddentargetIn the attributes, but during normal development, you can directly view the blue display attribute part to obtain and modify data without in-depth exploration.ProxyInternal structure.

3. Processing responsive data of array type

In JavaScript, arrays also belong to the category of objects.reactiveThe array can also be converted into responsive data. For example, we want to show a game list:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Array</title>
</head>
<body>
    <div >
        <h2>Game List</h2>
        <ul>
            <li v-for="game in games" :key="">{{  }}</li>
        </ul>
        <button @click="changeFirstGame">Modify the name of the first game</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Define an array of ordinary games                let games = [
                    { id: '01', name: 'Honor of Kings' },
                    { id: '02', name: 'Genshin Impact' },
                    { id: '03', name: 'The Romance of the Three Kingdoms' }
                ];
                const changeFirstGame = () => {
                    games[0].name = 'Meteor Butterfly Sword';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

In the above code, we try to modify the name of the first game when the button is clicked, but if we run it directly, we will find that the page will not be updated. This is becausegamesArrays are normal arrays, not responsive.

usereactiveTurn an array into a responsive form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Array</title>
</head>
<body>
    <div >
        <h2>Game List</h2>
        <ul>
            <li v-for="game in games" :key="">{{  }}</li>
        </ul>
        <button @click="changeFirstGame">Modify the name of the first game</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Create reactive game arrays using reactive                const games = reactive([
                    { id: '01', name: 'Honor of Kings' },
                    { id: '02', name: 'Genshin Impact' },
                    { id: '03', name: 'The Romance of the Three Kingdoms' }
                ]);
                const changeFirstGame = () => {
                    games[0].name = 'Meteor Butterfly Sword';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

After modification, click the button and the name of the first game on the page will be updated, which reflects thereactiveThe ability to process array responsive expressions.

4. Reactive's deep response

reactiveThe defined responsive data is deep, that is, it can track changes in the data no matter how deep the object is. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div >
        <h2>test</h2>
        <p>{{  }}</p>
        <button @click="changeObj">Modify data</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Define multi-level ordinary objects                let obj = {
                    a: {
                        b: {
                            c: 'Father No. 666'
                        }
                    }
                };
                const changeObj = () => {
                     = 'Father No. 999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

In the above code, the properties of multi-level objects are directly modified, and the page will not be updated. usereactivePackage object:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div >
        <h2>test</h2>
        <p>{{  }}</p>
        <button @click="changeObj">Modify data</button>
    </div>
    <script src="/vue@3/dist/"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // Create reactive multi-level objects using reactive                const obj = reactive({
                    a: {
                        b: {
                            c: 'Father No. 666'
                        }
                    }
                });
                const changeObj = () => {
                     = 'Father No. 999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        ('#app');
    </script>
</body>
</html>

After modification, click the button, the data on the page will be updated as the object properties change, which proves thatreactivedeep response characteristics.

Through the above content, we have a comprehensive understanding of VuereactiveUse of creating object-type responsive data, whether it is a normal object, an array or a multi-level object,reactiveAll of them can be responsive and provide strong support for us in developing efficient and interactive Vue applications.

This is the article about reactive in Vue: a powerful tool for creating object-type reactive data. For more related content of reactive reactive data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!