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

明确一点

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.mySetChangeTracker
      return [...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.mySetChangeTracker
      console.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"
    }

计算属性特点

1、具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
2、是计算值，
3、应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值