如何解决Vue不能监听数组变化

本篇内容主要讲解“如何解决Vue不能监听数组变化”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何解决Vue不能监听数组变化”吧!

目录

• 一、vue监听数组
  

• 二、vue无法监听数组变化的情况
  

一、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不能监听数组变化”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！