vue中的computed的this指向問題

crossoverJie 發(fā)布于2019-08-23 13:53 / 3259人閱讀

摘要：今天在寫項目時，用到了計算屬性，遇到了使用箭頭函數(shù)出現(xiàn)指向問題，這里記錄下箭頭函數(shù)中的箭頭函數(shù)內(nèi)部的是詞法作用域，由上下文確定函數(shù)體內(nèi)的對象，就是定義時所在的對象，而不是使用時所在的對象中的使用箭頭函數(shù)不使用箭頭函數(shù)使用自己的理解在中使用箭

今天在寫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

此時使用allFigure: function() {}的形式就可以解決，this指向了vueComponent

或者使用對象的形式，用set()、get()方法也不會出現(xiàn)問題

正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現(xiàn)瀑布流（multi-column多列及flex布局）

時間戳轉(zhuǎn)換成時間日期格式及去重

微信小程序之購物車和父子組件傳值及calc的注意事項

云服務(wù)器 GPU云服務(wù)器 this的指向改變this指向 javaScript中的this js中的this

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99723.html

相關(guān)文章

淺析Vue響應(yīng)式原理（一）

摘要：淺析響應(yīng)式原理一的特點之一是響應(yīng)式，視圖隨著數(shù)據(jù)的更新而更新，在視圖中修改數(shù)據(jù)后實例中的數(shù)據(jù)也會同步更新。對于每個響應(yīng)式數(shù)據(jù)，會有兩個實例，第一個是在中的閉包遍歷，用途顯而易見。接收一個回調(diào)函數(shù)，會在重新求值且值更新后執(zhí)行。淺析Vue響應(yīng)式原理（一） Vue的特點之一是響應(yīng)式，視圖隨著數(shù)據(jù)的更新而更新，在視圖中修改數(shù)據(jù)后Vue實例中的數(shù)據(jù)也會同步更新。內(nèi)部借助依賴(下文中的Dep類)...

lookSomeone 2019-08-23 13:42 評論0 收藏0
Vue.js中 computed 和 methods 的區(qū)別

摘要：官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。比如這...

Raaabbit 2019-08-23 14:46 評論0 收藏0
Vue.js中 computed 和 methods 的區(qū)別

摘要：官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。比如這...

TwIStOy 2019-08-02 14:06 評論0 收藏0
Vue 實例中的生命周期鉤子詳解

摘要：實例在文檔中經(jīng)常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

gityuan 2019-08-20 15:16 評論0 收藏0
vue計算屬性Computed的小秘密

摘要：中小秘密的發(fā)現(xiàn)之旅首先我們看一段代碼請問會間隔的打印出來嗎中去掉，再問會間隔的打印出來嗎如果第二問沒有打印出來，那么在第二問的基礎(chǔ)上怎么修改才能再次打印出來呢我先來揭曉答案會打印出來不會打印出來可以用過添加監(jiān)聽，來打印請問為什么呢以下是我的 vue中computed小秘密的發(fā)現(xiàn)之旅首先我們看一段代碼 {{ count }} new V...

adie 2019-08-26 13:46 評論0 收藏0