vue.set的使用和vue数据的序列化

Posted 2020-11-08 叫我小枫

　　首先简单说一下vue双向数据绑定在实际应用上会有一点异常。

　　1.比如我想使用一个数组内部数据的改变，直接使用arr[0]=‘bbbb’，这样是不会触发数据绑定的。视图不会变化。

　　2.这个问题就纯是js的问题了。。我们需要把一个json数据的值赋值给另一个，当我们改变另一个数据内部的数据时。第一个也会跟着改变

一、首先对于问题一，官方已经给了很好的解释。怪就怪在我没有仔细看文档吧。记录一下涨个记性。

<template>
  <div class="hello">
      <ul>
        <li v-for="(item,index) in arr1" :key="index">
          {{item}}
        </li>
      </ul>
      <input type="button" @click="index" value="改变数据">
  </div>
</template>

//以下为script代码
data () {
    return {
      arr1:[‘wwwww‘,‘hhhhh‘,‘aaaaa‘,‘ttttt‘]
    }
  },
  methods:{
    index(){
      // 1.使用数组特定方法。
      // this.arr1.shift();
      // this.arr1.unshift(‘bbbbb‘);
      
      // 2.这个方法和之前的差不多。
      //this.arr1.splice(0,1,‘bbbbb‘);

      // 3.使用源生的set方法，但是和splice用法一样。我看了一下源码。其实就使用了splice来直接使用了。还不如直接用splice方便些
      this.vm.$set(this.arr1,0,‘bbbbb‘)
      
      console.log(this.arr1);
    }
  }

　　对了 需要注意一下，我使用的是使用vue-cli创建了一个项目直接写的测试。和网上很多人写的直接生成vue实例有一些区别的。

　　以上的代码中，方法3是不能直接使用的。因为不同文件内部调用这个set方法有一些区别的。所以我们需要在外部的main.js内部添加这样一行代码

Vue.prototype.vm=Vue.prototype;

　　否则调用会出现问题。

二、对于方法一，我们确实可以使用深克隆等方法去实现该种效果。但是还有一种方便的方法，使用js的序列化。

例如：

<template>
  <div class="hello">
      <ul>
        <li v-for="(item,index) in arr1" :key="index">
          {{item}}
        </li>
      </ul>
      <input type="button" @click="index" value="改变数据">
  </div>
</template>


data () {
    return {
      arr1:{a:‘a‘,b:‘b‘,c:‘c‘},
      arr2:{}
    }
  },
  methods:{
    index(){
      this.arr2=this.arr1;
      //this.arr2=JSON.parse(JSON.stringify(this.arr1));//序列化
      this.arr2.a=‘c‘;
      console.log(this.arr1);
      console.log(this.arr2);
    }
  }

　　通过json.stringify和parse就可以达到这样的效果，避免修改arr2的时候修改了arr1。