vue2.0是不支持通过下标来更改数组的，无法做到响应式

2021-07-27 13:03:03 阅读：197 来源： 互联网

标签：Vue 下标更改 items E6% vm set 数组 vue2.0

以下内容来自英文版官方文档：https://vuejs.org/v2/guide/list.html#Array-Change-Detection（但怎么说呢英文其实比中文更深究一点emmm 饿其实中文也有在https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95 但是开始没找到）

1.对于更改了原数组的方法，例如
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
vue是进行了监听的重写所以可以知道数组的变更。

2.对于返回新数组的：例如 filter()、concat() 和 slice()

(其实还有map这种，简称f smc）vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

3.Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

在data之外定义是不行的。

Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

回想一下splice（斯普莱斯）: 数组在前，参数是下标，删除1，新增加的那个数组

也可以使用vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

可以使用this.$set(数组，id，值）来监听

5.Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作

也就是说不是实时而是异步的，有一定的延迟，如果用nexttick就能马上执行了

因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}

响应式这节课：https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 （真不戳）

标签：Vue,下标,更改,items,E6%,vm,set,数组,vue2.0
来源： https://www.cnblogs.com/lx2331/p/15065234.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2.0是不支持通过下标来更改数组的，无法做到响应式