詳解vue中的computed的this指向問題
更新時(shí)間：2018年12月05日 14:32:54 作者：ZJW0215
這篇文章主要介紹了詳解vue中的computed的this指向問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
今天在寫vue項(xiàng)目時(shí)，用到了computed計(jì)算屬性，遇到了使用箭頭函數(shù)出現(xiàn)this指向問題，這里記錄下
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)問題
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vuex下Store的模塊化拆分實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)簡單的吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果,需要的朋友可以參考下2019-10-10
在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
這篇文章主要介紹了在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了tauri和vue通信的問題解決方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue elementUI select下拉框如何設(shè)置默認(rèn)值
這篇文章主要介紹了vue elementUI select下拉框如何設(shè)置默認(rèn)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
webpack4+Vue搭建自己的Vue-cli項(xiàng)目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對(duì)于vue-cli的強(qiáng)大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要為大家介紹了Vue3必學(xué)技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue項(xiàng)目中axios的封裝請(qǐng)求，axios?是一個(gè)輕量的HTTP客戶端，它基于?XMLHttpRequest?服務(wù)來執(zhí)行?HTTP?請(qǐng)求，支持豐富的配置，下文更多詳細(xì)資料,需要的朋友可以參考一下2022-03-03