vue計(jì)算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
vue的計(jì)算屬性
計(jì)算屬性可以幫助我們簡化代碼，做到實(shí)時(shí)更新，不用再自己添加function去修改data。
首先看一下計(jì)算屬性的基本寫法(摘自官網(wǎng))
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
這樣我們?cè)谀０胬镞@樣引入computed屬性就可以了，他的效果個(gè)data一樣
<div id="demo">{{ fullName }}</div>
這樣我們修改firstName或者lastName，fullName都會(huì)同步更新
這里我們主要不是講這個(gè),而是講如果把 firstName和lastName放在一個(gè)數(shù)組里
比如這樣[firstName ,lastName]
如果這時(shí)候修改數(shù)組中的一項(xiàng)會(huì)不會(huì)有相同的效果呢？
修改一下代碼
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'
}
觸發(fā)change方法可見fullName并沒有變化。原因可能是vue沒有監(jiān)聽到數(shù)組 nameArray的長度變化。
此時(shí)我們可以采用splice讓數(shù)組的長度有個(gè)變化，這時(shí)候vue就可以監(jiān)聽到了
this.nameArray.splice(0, 1, '123')
或者使用vue的$set方法
this.$set(this.nameArray, 0, '123')
還有一點(diǎn)要注意，就是如果這個(gè)計(jì)算屬性沒有使用過，也就是說頁面中沒有引用，也沒有其他變量使用他，同樣不會(huì)觸發(fā)計(jì)算屬性。至少，來個(gè)console打印一下也行
以上這篇vue計(jì)算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue實(shí)現(xiàn)簡單的信號(hào)和電池電量組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡單的信號(hào)和電池電量組件效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
Arco Design 作為一款專為 Vue3 打造的企業(yè)級(jí) UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue的axios請(qǐng)求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請(qǐng)求改變content-type為form-data問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue3?中的?watchEffect?特性詳解,watchEffect?是?Vue3?中非常有用的一個(gè)特性，它可以讓我們輕松地監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行指定的回調(diào)函數(shù)，從而簡化代碼并提高應(yīng)用的性能，需要的朋友可以參考下2023-04-04
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04