关于Vue不能监听（watch）数组变化

enda 发布于2019-08-26 13:49 / 3489人阅读

摘要：一监听数组实际上可以监听数组变化，比如监听在比如使用从数组下标删除两个元素，并在下标插入一个元素监听数组也能够监听到二无法监听数组变化的情况但是数组在下面两种情况下无法监听利用索引直接设置数组项时，例如修改数组的长度时，例如举例无法监听数组

一、vue监听数组
vue实际上可以监听数组变化，比如

data () {
  return {
    watchArr: [],
  };
},
watchArr (newVal) {
  console.log("监听：" + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元素3

data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watchArr (newVal) {
  console.log("监听：" + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

push数组也能够监听到
二、vue无法监听数组变化的情况
但是数组在下面两种情况下无法监听

利用索引直接设置数组项时，例如arr[indexofitem]=newValue

修改数组的长度时，例如arr.length=newLength

举例无法监听数组变化的情况
1、利用索引直接修改数组值

data () {
  return {
    watchArr: [{
      name: "krry",
    }],
  };
},
watchArr (newVal) {
  console.log("监听：" + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr[0].name = "xiaoyue";
  }, 1000);
},

2、修改数组的长度
长度大于原数组就将后续元素设置为undefined
长度小于原数组就将多余元素截掉

data () {
  return {
    watchArr: [{
      name: "krry",
    }],
  };
},
watchArr (newVal) {
  console.log("监听：" + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.length = 5;
  }, 1000);
},

GPU云服务器云服务器监听参数变化 js 监听数据变化 js 监听数组改变关于c语言数组的代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109598.html

Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 评论0 收藏0
Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 评论0 收藏0
响应式数据与数据依赖基本原理

摘要：响应式数据响应式数据不是凭空出现的。对于对象而言，如果是之前不存在的属性，首先可以将进行响应化处理比如调用，然后将对具体属性定义监听比如调用函数，最后再去做赋值，可能具体的处理过程千差万别，但是内部实现的原理应该就是如此仅仅是猜测。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　国内前端算...

or0fun 2019-08-26 11:54 评论0 收藏0
用Vue实现一个全选指令

摘要：最近用做了两个项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用的，第二个项目用指令来实现，用起来，发觉指令更加方便。至此，一个全选的指令就完成了。最近用vue做了两个项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。第一次做全选的时候是刚开始接触vue不久，全选的实...

zollero 2019-08-20 10:45 评论0 收藏0
Vue 实现的音乐项目 music app 知识点总结分享

摘要：后两个属性可选。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为，即项目的本来大小。结合的异步组件和的代码分割功能，轻松实现路由组件的懒加载。项目总结这是我第二个用 Vue 实现的项目，下面内容包括了在实现过程中所记录的知识点以及一些小技巧项目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 评论0 收藏0