一. vue 中数组操作的响应式
1. Vue 中javaScript 数组响应式操作的方法
-
- push()方法响应式, 向数组末尾追加元素
let names = [1,2,3,4,5,6]
names.push('a')
names.push('b', 'c','d') // 一次追加多个元素
let arr = ['A', 'B', 'C']
names.push(...arr) //相当于是分别push('A'),push('B'),push('C')
-
- pop() 方法响应式, 删除末尾的元素
let names = [1,2,3,4,5,6]
names.pop() // 删除末尾的一个元素
-
- shift() 方法响应式, 删除首个元素
let names = [1,2,3,4,5,6]
names.shift()
-
- unshift() 方法响应式, 在数组前面插入元素
let names = [1,2,3,4,5,6]
names.unshift('A1') // 数组首尾插入元素
names.unshift('B1', 'B2') // 数组首尾插入 多个元素
let arr2 = ['c1', 'c2']
names.unshift(...arr2) // 相当于数组展开后 依次插入
-
- splice() 方法响应式, 删除元素/ 插入元素/ 替换元素
let arr3 = [0,1,2,3,4,5,6,7,8,9]
// 删除元素
arr3.splice(startIndex) // 删除索引startIndex之后的所有的元素
arr3.splice(startIndex, length) // 删除索引startIndex开始之后的length个元素
// arr3.splice(startIndex) 等价于 arr.splice(startIndex, 1)
// 替换元素
arr3.splice(startIndex, length, item0, item1, item2) // 将从索引startIndex开始的length长度的元素使用后面的 item0,item1, item2 ... 替换掉
let arr4 = ['a','b']
arr3.splice(startIndex, length, ...arr4) // 将从索引startIndex开始的length长的元素使用 arr4 展开替换
// 插入元素
arr3.splice(startIndex, 0, item0, item1, item2) // 在startIndex的位置插入 item0/ item1/item2 元素
let ar = ['A','B']
arr3.splice(startIndex, 0, ...ar) // 在 startIndex位置展开数组ar 插入进去
splice 方法的理解:
相当于splice 有三个参数, startIndex, lentgth, ..args
splice 的整体思想是替换, 当第三个参数 ...args没有时就把 startIndex开始的length替换换空, 就相当于删除, 当...args参数有值时表示替换, 当替换范围lenght 大于0,就使用..args替换指定的长度,如果length==0 表示没有替换的范围直接将...args 插入. splice 整体的思路是替换
-
- sort(func) 响应式方法, 排序
let arr11 = [1,7,5, 10, 0]
arr.sort() // 默认排序, 默认是将数组元素转换为字符串, 按照字符串升序排序
arr.sort(function(a,b){ // 升序排序
return a > b
})
arr.sort(function(a,b){ // 降序排序
return a > b
})
-
- reverse() 响应式方法, 数组翻转
let arr12 = [1,2,3,4]
arr12.reverse()
2. 在vue 中如果你直接使用下标操作数组元素是不会有响应式结果的
let arr = [0,1,2,3,4]
arr[1] = '没有响应式结果' // 要避免这种直接操作内存的写法
arr[5] = '也是没有响应式结果的'
除了通过js中数组提供的方法来操作,可以实现js数组的响应式操作外, 在vue 模块中也为我们提供了方法, 通过这个方法,我们在vue中对数组的增删改查都可以实现响应式的效果
// 1. 安装vue模块
npm install vue --save
// 2. 导入vue模块
import Vue from 'vue'
let arr = [1,2,3,4]
//3. 调用vue提供的set方法对数组进行增删查改即可
Vue.set(arr, 1, 'vue的响应式')
Vue.delete(arr, 1)
二. vue 中json 对象操作的响应式
- 在vue 中json 对象的响应式原理和数组的响应式原理一样的, 要想json对象中的数据是响应式的, 需要现在组件的 data内或者 vuex 的store中的state内先定义json数组, 在对数组进行操作, 这样才能达到响应式
- 在vue中直接通过点语法或['key'], 来修改 state 或者data 中的json对象数据时, 只有先定义的数据才有响应式, 如果是通过点语法或['key'] 新增json对象的字段, 是没有响应式效果的.如下:
以下是以vuex 中的store 中的state 中定义的数据距离说明, 在vue组件中的data内定义的数据也是同样的道理
state:{
info:{
name:'zhangsan',
age:18
}
},
mutations{
updateAge(state, age){
state.info.age = age //响应式
},
appendAddress(state, add ){
state.info['address']= add //无响应式
// state.info.address = add //无响应式
},
}
三. vue 中响应式总结
如果想要在vue 中实现, 数据变化就有响应式, 请使用vue 提供的 vue.set() 方法来实现对数据的增删查改, 这样在对数据进行操作时就不必关心定义问题了, 只管操作即可.
详细定义如下:
set(object: object, key: string | number, value: T): T;
set(array: T[], key: number, value: T): T;
delete(object: object, key: string | number): void;
delete(array: T[], key: number): void;