Vue:添加响应式数据

news/2025/3/18 17:02:53/

Vue:添加响应式数据

1. 什么是响应式?

修改 data 后,页面自动改变/刷新,这就是响应式。就像我们在使用 Excel 的时候,修改一个单元格中的数据,其它单元格的数据会联动更新,这也是响应式。在前端开发中,响应式是一种非常重要的特性,它使得页面能够根据数据的变化自动更新,提升了用户体验和开发效率。

2. Vue 的响应式是如何实现的?

数据劫持:Vue 底层使用了 Object.defineProperty,将 data 中的数据放到了 _data 中,在 _data 中配置了 setter 方法,当去修改属性值时,setter 方法则被自动调用,setter 方法中不仅修改了属性值,而且还做了其他的事情,例如:重新渲染页面。setter 方法就像半路劫持一样,所以称为数据劫持。

不过,在 Vue 3 中,响应式系统采用了 Proxy 对象来替代 Object.definePropertyProxy 提供了更强大和灵活的元编程能力,可以直接监听对象的属性变化,而不需要像 Object.defineProperty 那样逐个属性进行劫持,这在处理嵌套对象和数组时更加高效。

javascript">// Vue 3 响应式示例
import { reactive } from 'vue';const state = reactive({message: 'Hello, Vue 3!'
});// 修改属性,自动触发响应式更新
state.message = 'New message';

3. Vue 会给 data 中所有的属性,以及属性中的属性,都会添加响应式。

Vue 在初始化时,会递归地遍历 data 对象的所有属性,使用 Object.defineProperty(Vue 2)或 Proxy(Vue 3)为每个属性添加响应式。这意味着无论是直接的属性还是嵌套的属性,只要在 data 中定义,都能实现响应式更新。

4. 后期添加的属性,不会有响应式,怎么处理?

Vue.set(目标对象, ‘属性名’, 值)
vm.$set(目标对象, ‘属性名’, 值)

<body><div id="app"><h1>{{msg}}</h1><div>姓名:{{name}}</div><div>年龄:{{age}}岁</div><div>数字:{{a.b.c.e}}</div><div>邮箱:{{a.email}}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>javascript">const vm = new Vue({el: "#app",data: {msg: "响应式与数据劫持",name: "jackson",age: 20,a: {b: {c: {e: 1,},},},},});// 1、测试:后期给 Vue 实例动态的追加的一些属性,会添加响应式处理吗?//vm.$data.a.email = 'jack@126.com'// 通过这种直接方式后期给 vm 追加的属性并没有添加响应式处理。//2、 如果你想给后期追加的属性添加响应式处理的话,调用以下两个方法都可以:// Vue.set() 、 vm.$set()//Vue.set(目标对象, 属性名, 属性值)//Vue.set(vm.$data.a, 'email', 'jack@126.com')//Vue.set(vm.a, 'email', 'jack@123.com')vm.$set(vm.a, "email", "jack@456.com");//3、 避免在运行时向 Vue 实例或其根 $data 添加响应式// 不能直接给 vm / vm.$data 追加响应式属性。只能在声明时提前定义好。//Vue.set(vm, 'x', '1')//Vue.set(vm.$data, 'x', '1')</script>
</body>

在 Vue 3 中,由于使用了 Proxy,可以直接通过 reactive 创建的对象添加属性,它会自动具备响应式。

javascript">import { reactive } from 'vue';const state = reactive({name: 'John'
});// 直接添加属性,自动具备响应式
state.age = 30;

5. Vue 没有给数组下标 0,1,2,3… 添加响应式,怎么处理?

① 调用 Vue 提供的 7 个 API:
push()
pop()
reverse()
splice()
shift()
unshift()
sort()
或者使用:
Vue.set(数组对象, ‘index’, 值)
vm.$set(数组对象, ‘index’, 值)

<body><!-- 1. 通过数组的下标去修改数组中的元素,默认情况下是没有添加响应式处理的。怎么解决?可以通过控制台去修改数组元素2. 第一种方案:vm.$set(数组对象, 下标, 值)  vm.$set(vm.users,0,'杰克')Vue.set(数组对象, 下标, 值)  vm.set(vm.users,0,'杰克')3. 第二种方案:push()    在数组 尾部逐个添加 元素,返回结果数组的长度,能接收任意数量参数,push() 修改了原数组。pop()  移除数组最后一项,返回的是被移除项。修改原数组reverse() 可将数组进行倒序,此方法会改变原数组。splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。shift() 删除数组的第一项元素,返回被删除的元素, 修改原数组unshift() 向数组的头部添加元素,返回的是结果数组的长度,修改原数组sort() 可将数组项灵活地进行升序或降序排列,此方法会改变原数组。在 Vue 当中,通过以上的 7 个方法来给数组添加响应式处理。--><div id="app"><h1>{{msg}}</h1><ul><li v-for="user in users">{{user}}</li></ul><ul><li v-for="vip in vips" :key="vip.id">{{vip.name}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>javascript">const vm = new Vue({el: "#app",data: {msg: "数组的响应式处理",users: ["jack", "lucy", "james"],vips: [{ id: "111", name: "zhangsan" },{ id: "222", name: "lisi" },],},methods: {update() {// this.users[0]='tom'// this.users.reverse()console.log(this.users);}}});</script>
</body>

在 Vue 3 中,使用 reactive 创建的数组也能自动处理数组元素的响应式更新,直接通过下标修改元素也会触发页面更新。

javascript">import { reactive } from 'vue';const state = reactive({numbers: [1, 2, 3]
});// 直接修改数组元素,自动触发响应式更新
state.numbers[0] = 10;

http://www.ppmy.cn/news/1580112.html

相关文章

基于FPGA轨道交通6U机箱CPCI脉冲板板卡

板卡简介&#xff1a; 本板为脉冲板&#xff0c;脉冲板主要执行CPU下达的指令&#xff0c;通过实现各种控制算法来调节PWM&#xff0c;然后输出光纤PWM信号来驱动变频器功率模块以达到控制电机的目的。 性能规格&#xff1a; 电源&#xff1a;DC5V&#xff1b;15V FPGA&…

主流区块链平台对 EVM 的依赖情况分类说明

文章目录 概要1. EVM 兼容链Binance Smart Chain (BSC)Polygon (PoS 链)Avalanche C-ChainFantomOptimism/Arbitrum 2. 非 EVM 链3. 混合型链AvalanchePolygon SupernetsBNB Chain 概要 1. EVM 兼容链 这些链直接支持以太坊虚拟机&#xff0c;开发者可用 Solidity 编写合约&a…

快速进行数据验证的优雅实现-注解

javax.validation包下的注解主要用于数据验证&#xff0c;确保数据符合特定的约束条件。以下是一个详细的表格&#xff0c;列出了这些注解的名称、作用、使用场景和示例&#xff1a; Excel 表格示例 注解名称作用使用场景示例AssertFalse确保字段值为 false布尔字段的验证Ass…

工程化与框架系列(32)--前端测试实践指南

前端测试实践指南 &#x1f9ea; 引言 前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面&#xff0c;包括单元测试、集成测试、端到端测试等&#xff0c;并提供实用的测试工具和最佳实践。 测试概述 前端测试主要包括以下类型&#xff1a; 单元测试&a…

P11229 [CSP-J 2024] 小木棍

题目传送门 前言 我们班很多人这道题都爆了&#xff0c;原因是写分讨写挂了。不像睿智的我&#xff0c;直接暴力加上一点点思维。 解题思路 step 1 首先我们把每个数的贡献都列出来。 设 g ( x ) g(x) g(x) 为拼成 x x x 需要的木棍数量。 第一行表示数 x i x_i xi​…

正则表达式小结

正则表达式是一种用于描述文本模式的特殊字符串&#xff0c;它由一系列字符和特殊字符组成&#xff0c;用于匹配和操作文本数据。下面是正则表达式的一些常见规则&#xff1a; 字符匹配&#xff1a; 普通字符&#xff1a;正则表达式中的普通字符&#xff08;字母、数字、符号&a…

Flutter 学习之旅 之 flutter 使用 SQLite(sqflite) 实现简单的数据本地化 保存/获取/移除/判断是否存在 的简单封装

Flutter 学习之旅 之 flutter 使用 SQLite&#xff08;sqflite&#xff09; 实现简单的数据本地化 保存/获取/移除/判断是否存在 的简单封装 目录 Flutter 学习之旅 之 flutter 使用 SQLite&#xff08;sqflite&#xff09; 实现简单的数据本地化 保存/获取/移除/判断是否存在…

【微知】plantuml在泳道图中如何将多个泳道框起来分组并且设置颜色?(box “浏览器“ #LightGreen endbox)

泳道分组并且着色 分组用 box和endbox &#xff0c;颜色用#xxx&#xff0c;标注用"xxx" box "浏览器" #LightGreen participant "浏览器1" as Browser participant "浏览器2" as Browser2 endboxparticipant "服务端" as …