您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

关于Vue不能监听(watch)数组变化的解决方法

51自学网 2022-02-21 13:40:30
  javascript

一、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);},

到此这篇关于关于Vue不能监听(watch)数组变化的文章就介绍到这了,更多相关Vue不能监听数组变化内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
vue使用Element el-upload 组件踩坑记
JavaScript实现下拉菜单的显示隐藏
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。