脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue  reactive响应式数据

Vue 中 reactive创建对象类型响应式数据的方法

 更新时间：2025年02月21日 10:06:10   作者：阿贾克斯的黎明  
在 Vue 的开发世界里,响应式数据是构建交互性良好应用的基础,之前我们了解了ref用于定义基本类型的数据,今天就来深入探讨一下如何使用reactive定义对象类型的响应式数据,感兴趣的朋友一起看看吧

在 Vue 的开发世界里，响应式数据是构建交互性良好应用的基础。之前我们了解了ref用于定义基本类型的数据，今天就来深入探讨一下如何使用reactive定义对象类型的响应式数据。

一、从普通对象到响应式对象

假设我们要展示汽车的信息，先创建一个普通的汽车对象：

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

在上述代码中，我们定义了一个car对象，并尝试在按钮点击时修改价格。但运行代码后会发现，点击按钮，页面上汽车的价格并不会更新。这是因为car只是一个普通对象，Vue 无法追踪其变化。

这时，reactive就派上用场了。我们只需要将普通对象用reactive包裹起来，就能让它变成响应式对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Example</title>
</head>
<body>
    <div id="app">
        <p>一辆{{ car.brand }}车价值{{ car.price }}万</p>
        <button @click="changePrice">修改汽车的价格</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive创建响应式汽车对象
                const car = reactive({
                    brand: '奔驰',
                    price: 100
                });
                const changePrice = () => {
                    car.price += 10;
                };
                return {
                    car,
                    changePrice
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后的代码，当点击按钮时，页面上汽车的价格会随之更新。这就是reactive的神奇之处，它能将普通对象转化为响应式对象，Vue 可以追踪其变化并更新视图。

二、reactive 与 Proxy

当我们使用reactive包裹对象后，在控制台打印这个对象，会发现它变成了一个Proxy。Proxy是原生 JS 提供的功能，不需要引入第三方库。它就像是一个代理，在访问和修改对象属性时起到拦截和处理的作用。

<!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>

在控制台查看打印结果，会看到Proxy相关的信息。我们真正的数据其实藏在target属性里，但平时开发中，直接查看蓝色显示的属性部分就可以获取和修改数据，不用深入探究Proxy内部结构。

三、处理数组类型的响应式数据

在 JavaScript 中，数组也属于对象范畴，reactive同样可以将数组转化为响应式数据。比如，我们要展示一个游戏列表：

<!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">修改第一个游戏的名字</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 定义普通游戏数组
                let games = [
                    { id: '01', name: '王者荣耀' },
                    { id: '02', name: '原神' },
                    { id: '03', name: '三国志' }
                ];
                const changeFirstGame = () => {
                    games[0].name = '流星蝴蝶剑';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

上述代码中，我们尝试在按钮点击时修改第一个游戏的名字，但直接运行会发现页面并不会更新。这是因为games数组是普通数组，不是响应式的。

使用reactive将数组变成响应式：

<!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">修改第一个游戏的名字</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive创建响应式游戏数组
                const games = reactive([
                    { id: '01', name: '王者荣耀' },
                    { id: '02', name: '原神' },
                    { id: '03', name: '三国志' }
                ]);
                const changeFirstGame = () => {
                    games[0].name = '流星蝴蝶剑';
                };
                return {
                    games,
                    changeFirstGame
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后，点击按钮，页面上第一个游戏的名字就会更新，这体现了reactive处理数组响应式的能力。

四、reactive 的深层次响应

reactive定义的响应式数据是深层次的，也就是说，无论对象的层级有多深，它都能追踪到数据的变化。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div id="app">
        <h2>测试</h2>
        <p>{{ obj.a.b.c }}</p>
        <button @click="changeObj">修改数据</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 定义多层级普通对象
                let obj = {
                    a: {
                        b: {
                            c: '法号666'
                        }
                    }
                };
                const changeObj = () => {
                    obj.a.b.c = '法号999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

上述代码中，直接修改多层级对象的属性，页面不会更新。使用reactive包裹对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reactive Deep</title>
</head>
<body>
    <div id="app">
        <h2>测试</h2>
        <p>{{ obj.a.b.c }}</p>
        <button @click="changeObj">修改数据</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, reactive } = Vue;
        const app = createApp({
            setup() {
                // 使用reactive创建响应式多层级对象
                const obj = reactive({
                    a: {
                        b: {
                            c: '法号666'
                        }
                    }
                });
                const changeObj = () => {
                    obj.a.b.c = '法号999';
                };
                return {
                    obj,
                    changeObj
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

修改后，点击按钮，页面上的数据会随着对象属性的改变而更新，证明了reactive的深层次响应特性。

通过以上内容，我们全面了解了 Vue 中reactive创建对象类型响应式数据的用法，无论是普通对象、数组还是多层级对象，reactive都能让它们具备响应式能力，为我们开发高效、交互性强的 Vue 应用提供了有力支持。

到此这篇关于Vue 中 reactive：创建对象类型响应式数据的利器的文章就介绍到这了,更多相关Vue reactive响应式数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • VsCode里的Vue模板的实现

    VsCode里的Vue模板的实现

    这篇文章主要介绍了VsCode里的Vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 如何解决模块““vue“”没有导出的成员“ref”问题

    如何解决模块““vue“”没有导出的成员“ref”问题

    这篇文章主要介绍了如何解决模块““vue“”没有导出的成员“ref”问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue-cli3 设置端口号(81)无效的解决

    vue-cli3 设置端口号(81)无效的解决

    这篇文章主要介绍了vue-cli3 设置端口号(81)无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-02-02
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    这篇文章主要介绍了vue使用better-scroll实现滑动以及左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue使用wangEditor实现自定义粘贴功能

    Vue使用wangEditor实现自定义粘贴功能

    这篇文章主要为大家详细介绍了Vue如何使用wangEditor实现自定义粘贴功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • 在Vue2中注册全局组件的两种方法详解

    在Vue2中注册全局组件的两种方法详解

    这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下
    2022-07-07
  • Vue3根据动态字段绑定v-model的操作代码

    Vue3根据动态字段绑定v-model的操作代码

    最近在学习vue技术，开发表格的时候，想把表格做成组件，那查询条件就需要动态生成，这就遇到一个问题，vue怎么动态给v-model变量值，本文通过实例代码给大家介绍，对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
    2022-10-10
  • vue使用echarts图表的详细方法

    vue使用echarts图表的详细方法

    这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 在Vue中进行数据分页的实现方法

    在Vue中进行数据分页的实现方法

    在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下
    2023-10-10
  • elementUI中MENU菜单踩坑

    elementUI中MENU菜单踩坑

    本文主要介绍了elementUI中MENU菜单踩坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04

最新评论