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打印一下也行
---------------------

該文章轉自 https://blog.csdn.net/grepets/article/details/82145946