vue计算属性无法监听到数组内部变化的解决方案

(编辑：jimmy 日期: 2024/5/16 浏览：3 次 )

vue的计算属性

计算属性可以帮助我们简化代码，做到实时更新，不用再自己添加function去修改data。

首先看一下计算属性的基本写法(摘自官网)

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

这样我们在模版里这样引入computed属性就可以了，他的效果个data一样

<div id="demo">{{ fullName }}</div>

这样我们修改firstName或者lastName，fullName都会同步更新

这里我们主要不是讲这个,而是讲如果把 firstName和lastName放在一个数组里

比如这样[firstName ,lastName]

如果这时候修改数组中的一项会不会有相同的效果呢？

修改一下代码

var vm = new Vue({
 el: '#demo',
 data: {
  nameArray:['Foo' ,'Bar']
 },
 computed: {
 fullName: function () {
  return this.nameArray[0] + ' ' + this.nameArray[1]
 }
 }
})

methods: {
 change () {
  this.nameArray[0] = '123'
 }

触发change方法可见fullName并没有变化。原因可能是vue没有监听到数组 nameArray的长度变化。

此时我们可以采用splice让数组的长度有个变化，这时候vue就可以监听到了

this.nameArray.splice(0, 1, '123')

或者使用vue的$set方法

this.$set(this.nameArray, 0, '123')

还有一点要注意，就是如果这个计算属性没有使用过，也就是说页面中没有引用，也没有其他变量使用他，同样不会触发计算属性。至少，来个console打印一下也行

以上这篇vue计算属性无法监听到数组内部变化的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：node省市区三级数据性能测评实例分析
下一篇：详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题