标签：用法 实例 改变 main gif asc 使用 spl 区别
首先简单说一下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。
标签：用法 实例 改变 main gif asc 使用 spl 区别
原文地址：https://www.cnblogs.com/acefeng/p/9094213.html
