当前位置：首页 > news >正文

让Vue响应Map或Set的变化操作，在vue中响应map和set数据结构，计算属性的用法，计算属性特点

news 2025/8/3 4:32:31

明确一点

vue的响应式系统不支持Map和Set，也就是说，当Map与Set里面的元素变化时Vue追踪不到这些变化，因此无法做出响应。

如下demo其实是不会进行数据相应的

<h1 v-for="(item,index) in mySetAsList" :key="index">{{item}}</h1>
<button @click="add">按钮</button>data() {return {i: 1,mySetChangeTracker: 1,mySet: new Set(),}}computed: {mySetAsList() {console.log(...this.mySet)let x = this.mySetChangeTrackerreturn [...this.mySet];}
},methods: {add() {this.mySet.add(this.i++);this.mySetChangeTracker += 1;}}

如何让map和set可以响应

1、创建一个可以相应的简单数据结构，利用vue已有的api，将这个简单数据结构和map或者set关联起来
2、需要创建此结构的可序列化副本并将其暴露给Vue

<h1 v-for="(item,index) in mySetAsList" :key="index">{{item}}</h1>
<button @click="add">按钮</button>data() {return {i: 1,mySetChangeTracker: 1,mySet: new Set(),}}computed: {mySetAsList() {let x = this.mySetChangeTrackerconsole.log(...this.mySet)return [...this.mySet];}
},methods: {add() {this.mySet.add(this.i++);this.mySetChangeTracker += 1;}}

也可以确定一下vue计算属性的用法：只要计算属性中用到了响应式数据，响应式数据发生变化，其实也就会触发到该计算属性使用到的地方（并不是必须返回一个响应式数据）

计算属性的set，get用法

当触发add方法时视图层会由 XiaoMing 变化为 ZhangMing，本质上就是响应式数据变化触发了计算属性的get方法


<h1>{{fullName}}</h1>data: function() {return {firstName: 'Xiao',lastName: 'Ming'};
},computed: {fullName:{get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值return this.firstName + ' ' + this.lastName},set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据//val就是fullName的最新属性值console.log(val)const names = val.split(' ');console.log(names)this.firstName = names[0];this.lastName = names[1];}}},methods: {add() {this.firstName = "Zhang"}}

当触发add方法时（给计算属性赋值），此时会触发计算属性的set方法，set函数中是可以对响应式数据进行一些处理的，如下代码

set =>改变响应式数据 =>响应式数据变化又触发了计算属性的get
add方法触发时界面显示Zhang fan

data: function() {return {firstName: 'Foo',lastName: 'Bar'};
},computed: {fullName:{get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值return this.firstName + ' ' + this.lastName},set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据//val就是fullName的最新属性值console.log(val)const names = val.split(' ');console.log(names)this.firstName = names[0];this.lastName = names[1];}}},methods: {add() {this.fullName = "Zhang fan"}