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

目录

• 一、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不能监听(watch)数组变化的文章就介绍到这了,更多相关Vue不能监听数组变化内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• 关于vue中如何监听数组变化
• vue中是怎样监听数组变化的
• 在vue中对数组值变化的监听与重新响应渲染操作
• vue计算属性无法监听到数组内部变化的解决方案
• vue watch普通监听和深度监听实例详解(数组和对象)
• Vue监听数组变化源码解析

本文由 华域联盟 原创撰写：华域联盟 » 关于Vue不能监听(watch)数组变化的解决方法

转载请保留出处和原文链接：https://www.cnhackhy.com/82630.htm