国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue中的computed的this指向問題

crossoverJie / 3251人閱讀

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

今天在寫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í)使用allFigure: function() {}的形式就可以解決，this指向了vueComponent

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

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

往期好文推薦：

判斷iOS和Android及PC端

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

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

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

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

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

相關(guān)文章

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

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

    lookSomeone 評(píng)論0 收藏0

  • Vue.js中 computed 和 methods 的區(qū)別

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

    Raaabbit 評(píng)論0 收藏0

  • Vue.js中 computed 和 methods 的區(qū)別

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

    TwIStOy 評(píng)論0 收藏0

  • Vue 實(shí)例中的生命周期鉤子詳解

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

    gityuan 評(píng)論0 收藏0

  • vue計(jì)算屬性Computed的小秘密

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

    adie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<