数组变异方法替换数组动态数组响应式数据
Posted 鲸渔要加油
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组变异方法替换数组动态数组响应式数据相关的知识，希望对你有一定的参考价值。
一、数组变异方法
- 在 Vue 中，直接修改对象属性的值无法触发 响应式，当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
- 变异数组方法就是保持数组方法原有功能不变的前提下对其进行功能拓展，把对数组数据的处理变成了 响应式
- 会影响原始的数据
push() | 往数组最后面添加一个元素，成功返回当前数组的长度 |
|---|---|
pop() | 删除数组的最后一个元素，成功返回删除元素的值 |
shift() | 删除数组的第一个元素，成功返回删除元素的值 |
unshift | 往数组最前面添加一个元素，成功返回当前数组的长度 |
splice() | 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值 |
sort() | sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 |
reverse() | reverse() 将数组倒序，成功返回倒序后的数组 |
二、替换数组
- 不会影响原始的数组，但总是返回一个新数组
filter | filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 |
|---|---|
concat | concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组 |
slice | slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组 |
<body>
<div id="box">
<div>
<span>
<input type="text" v-model='a'>
<button @click='add'>添加</button>
<button @click='del'>删除</button>
<button @click='change'>替换</button>
</span>
</div>
<ul>
<li :key='i' v-for='(v,i) in list'>{{v}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#box',
data: {
a: '',
list: ['1', '2', '3']
},
filters: {},
methods: {
add: function () {
this.list.push(this.a)
},
del: function () {
this.list.pop()
},
change: function(){
this.list = this.list.slice(0,2)
}
}
})
</script>
</body>
三、动态数组响应式数据
Vue.set(a, b, c)vm.$set(a, b, c)- a是要更改的数据 、 b是索引、 c是更改后的数据
<body>
<div id="box">
<ul>
<li :key='i' v-for='(v,i) in list'>{{v}}</li>
</ul>
<div>{{info.a}}</div>
<div>{{info.b}}</div>
<div>{{info.c}}</div>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#box',
data: {
list: ['1', '2', '3'],
info: {
a: 'aaa',
b: 'bbb'
}
}
})
Vue.set(vm.list, 1, '99999')
vm.$set(vm.list, 2, '00000')
// vm.info.c = 'ccc'
vm.$set(vm.info, 'c', 'ccc')
</script>
</body>
以上是关于数组变异方法替换数组动态数组响应式数据的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript数组方法: 变异方法 (mutation method)和非变异 (non-mutating method)