一. vue 中数组操作的响应式

1. Vue 中javaScript 数组响应式操作的方法

• 1. 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')

• 2. pop() 方法响应式, 删除末尾的元素

let names = [1,2,3,4,5,6]
names.pop() // 删除末尾的一个元素

• 3. shift() 方法响应式, 删除首个元素

let names = [1,2,3,4,5,6]
names.shift()

• 4. unshift() 方法响应式, 在数组前面插入元素

let names = [1,2,3,4,5,6]
names.unshift('A1')   // 数组首尾插入元素
names.unshift('B1', 'B2') // 数组首尾插入 多个元素
let arr2 = ['c1', 'c2']
names.unshift(...arr2)  // 相当于数组展开后 依次插入

• 5. 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 整体的思路是替换

• 6. 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
})

• 7. 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 对象操作的响应式

1. 在vue 中json 对象的响应式原理和数组的响应式原理一样的, 要想json对象中的数据是响应式的, 需要现在组件的 data内或者 vuex 的store中的state内先定义json数组, 在对数组进行操作, 这样才能达到响应式
2. 在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<T>(object: object, key: string | number, value: T): T;
  set<T>(array: T[], key: number, value: T): T;
  delete(object: object, key: string | number): void;
  delete<T>(array: T[], key: number): void;