Vue2.0 no-side-effects-in-computed-properties WARNING處理 點選原文檢視動態效果
Vue2.0 no-side-effects-in-computed-properties WARNING處理
點選原文檢視動態效果 https://blog.csdn.net/elie_yang/article/details/80472640
V2.0學習《高仿餓了麼》過程中,對照視訊程式碼編寫如下程式碼:
listShow() {undefined
if (!this.totalCount) {undefined
this.fold = true;
return false;
}
let show = !this.fold;
return show;
}
}
編譯警告資訊如下:
Unexpected side effect in "listShow" computed property
個人理解計算屬性內不應該對屬性值做變更,解決這個問題的做法之一是使用watch監聽:
computed: {undefined
listShow () {undefined
if (!this.totalCount) {undefined
// this.collapsed = false;
return false;
}
if (this.totalCount > 0 && !this.collapsed) {undefined
return true;
}
return false;
},
...
watch: {undefined
selectedFoods (newFoods, oldFoods) {undefined
if (newFoods.length === 0) {undefined
this.collapsed = true;
}
}
}
</article>