一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷
computed沒(méi)有觸發(fā)的原因排查經(jīng)歷
vue中computed計(jì)算屬性可以用來(lái)綁定動(dòng)態(tài)變量，而且它可以實(shí)時(shí)刷新，并且也可以在watch中監(jiān)控，所以本人很喜歡用這個(gè)東西，一般把需要隨data中變量一起變化的屬性全部放在這里面，data中只定義互相獨(dú)立互相不影響的變量，這樣可以極大地減少重復(fù)變量的定義，使代碼結(jié)構(gòu)清晰，也便于排查錯(cuò)誤。
最近出現(xiàn)了一個(gè)問(wèn)題
就是我在computed中定義的一個(gè)動(dòng)態(tài)變量沒(méi)有在相關(guān)屬性發(fā)生變化后觸發(fā)更新。
代碼如下：
data(){
return {
model:{
name:"test"
}
}
}
computed:{
lonexist:function(){
return this.model.lon!=null;
}
}
method:{
changelon(){
this.model.lon="123";
}
}
以上只是簡(jiǎn)化代碼，目的是說(shuō)明問(wèn)題，然后我在一個(gè)button的click事件中綁定changelon方法，點(diǎn)擊button后lonexist計(jì)算屬性并沒(méi)有被觸發(fā)。
原因是
model初始化時(shí)沒(méi)有這個(gè)屬性，解決方法是在model的初始化方法中添加這個(gè)屬性就可以了:
data(){
return {
model:{
name:"test"，
lon:null
}
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)
本文主要介紹了vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Vue3頁(yè)面數(shù)據(jù)加載延遲的問(wèn)題分析和解決方法
在?Vue?3?的項(xiàng)目中,當(dāng)我們使用響應(yīng)式數(shù)據(jù)（如?ref?或?computed）來(lái)管理頁(yè)面狀態(tài)時(shí),可能會(huì)遇到由于接口數(shù)據(jù)加載延遲,導(dǎo)致頁(yè)面初始渲染時(shí)數(shù)據(jù)尚未獲取完成的問(wèn)題,本文針對(duì)此問(wèn)題簡(jiǎn)單分析了原因和解決方法,需要的朋友可以參考下2024-11-11
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開(kāi)路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
通過(guò)html文件來(lái)使用Vue的單文件組件形式詳解
這篇文章主要介紹了通過(guò)html文件來(lái)使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了vite中使用@配置路徑別名過(guò)程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯(cuò)誤問(wèn)題
這篇文章主要介紹了解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09