关于Vue不能监听(watch)数组变化

栏目: 编程语言 · 发布时间: 6年前

内容简介:一、vue监听数组vue实际上可以监听数组变化,比如在比如使用splice(0,2,3)从数组下标0删除两个元素,并在下标0插入一个元素3

一、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无法监听数组变化的情况

但是数组在下面两种情况下无法监听

  1. 利用索引直接设置数组项时,例如arr[indexofitem]=newValue
  2. 修改数组的长度时,例如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);
},

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机算法设计与分析

计算机算法设计与分析

王晓东 / 电子工业出版社 / 2007-5 / 29.50元

《计算机算法设计与分析(第3版)》为普通高等教育“十一五”国家级规划教材,是计算机专业核心课程“算法设计与分析”教材。全书以算法设计策略为知识单元,系统介绍计算机算法的设计方法与分析技巧。主要内容包括:算法概述、递归与分治策略、动态规划、贪心算法、回溯法、分支限界法、随机化算法、线性规划与网络流、NP完全性理论与近似算法等。书中既涉及经典与实用算法及实例分析,又包括算法热点领域追踪。 为突出......一起来看看 《计算机算法设计与分析》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具