詳解vue中的computed的this指向問題
更新時間：2018年12月05日 14:32:54 作者：ZJW0215
這篇文章主要介紹了詳解vue中的computed的this指向問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
今天在寫vue項目時，用到了computed計算屬性，遇到了使用箭頭函數(shù)出現(xiàn)this指向問題，這里記錄下
1.箭頭函數(shù)中的this
- 箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定
- 函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象
2.vue中的computed
使用箭頭函數(shù)
list: () => {
console.log(this)
}
不使用箭頭函數(shù)
allFigure: function() {
console.log(this)
},
使用get()
allFigure: {
get() {
console.log(this);
}
}
3.自己的理解
- 在computed中使用箭頭函數(shù)的話，會導(dǎo)致this指向的不是整個的vueComponent
- 此時使用匿名函數(shù)的形式就可以解決，this指向了vueComponent
- 或者使用對象的形式，用set()、get()方法也不會出現(xiàn)問題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法
由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾，但是報錯，百度說vue不能同時使用v-if和v-for，今天小編給大家分享解決方式，感興趣的朋友跟隨小編一起看看吧2023-07-07
Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
這篇文章主要介紹了vue axios登錄請求攔截器，判斷是否登錄超時，或?qū)φ埱蠼Y(jié)果做一個統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,需要的朋友可以參考下2019-11-11
當(dāng)我們談?wù)摶蛴懻撛?Vue?中創(chuàng)建用戶界面組件時,經(jīng)常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應(yīng)用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了Vue實現(xiàn)購物小球拋物線的方法實例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
路由懶加載是一種優(yōu)化Vue應(yīng)用程序性能的技術(shù)，本文介紹了Vue中如何進行路由懶加載，包括使用Vue異步組件和Webpack代碼分割,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了Vue3.0手寫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10