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