亲宝软件园·资讯

展开

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

奥特曼 人气:0
想了解关于Vue不能监听(watch)数组变化的解决办法的相关内容吗,奥特曼在本文为您仔细讲解Vue不能监听数组变化的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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无法监听数组变化的情况

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

举例无法监听数组变化的情况

1、利用索引直接修改数组值

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

2、修改数组的长度

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

加载全部内容

相关教程
猜你喜欢
用户评论