如何解決vue中methods中的方法閉包快取的問題

這篇文章主要介紹了關於如何解決vue中methods中的方法閉包快取的問題，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

vue中methods中的方法閉包快取問題

問題背景

需求描述

• 在路由的導覽列中需要, 判斷是否為第一次點選

• 需要一個標誌位元來記錄是否點擊過

• #現況:

• 這個標誌位元只在一個函數中用過.不希望存放全域

• 希望在這個methods中形成閉包, 用來快取這個函數

• 做出如下嘗試後, 發現可以實作.

• 目前問題:

• ##不能在閉套件呼叫時找到正確的this.

詭異點

• 測試使用時: 傳回的this找到了window

// 测试使用:
  <p>
    <button>测试按钮</button>
  </p>
  <script>
    var app = new Vue({
      el: &#39;#app&#39;,
      methods: {
        test: (() => {
          `use strict`
          console.log(this) // Window
          var flag = true
          return () => {
            console.log(this) // Window
            flag = false
          }
        })()
      }
    })
  </script>

• 實際專案中的this變成了

  undefined

• 更詭異的是

  debugger之後, 我們一步步來看

• 目前程式碼:

    pointJump: (() => {
      let isFirstChanged = false;
      console.log(this);
      debugger;
      return entry => {
        console.log(this);
        console.log(isFirstChanged);
        debugger;
        isFirstChanged = true;
      };
    })(),

• 操作:

1. #刷新頁面, 第一次函數立即執行

   

2. #頁面產生完成後: 我們再次透過按鈕觸發事件:

   此時debugger顯示記憶體中為Vue的頂級物件, 而在控制台列印出來的依舊是undefined

##執行程式分析

• 第一次執行的時候為undefined是正常的, 因為第一次閉包執行, 沒有找到this

• 當我們再次執行的時候, 雖然調用起來的上下文, 也就是this已經改了, 但是因為在作用域中那個

  this所代表的空間還是undefined, 所以沒有能改變過來.

##就造成了我們所看到的詭異的現象.
與測試文件有差別的原因

因為在測試環境下, 沒有能開啟嚴格模式.
經過兩次不同位置的開啟嘗試, 都不對勁
依舊可以找到window物件
現在推測是在vue內部進行的實作, 因為引入的vue版本不同.
• 需要再進行測試, 看來源碼還是要好好過一遍

    <script>
      var app = new Vue({
        el: &#39;#app&#39;,
        methods: {
          test: (() => {
            `use strict`
            console.log(this) // Window
            var flag = true
            return () => {
              console.log(this) // Window
              flag = false
            }
          })()
        }
      })
    </script>

最後找到原因的測試

因為箭頭函數的this是不會改變, 擁有根據父級能夠返回的this
然後因為上面的閉包環境中的this, 指向的一直都是
• undefined
  #

  const test = (() => {
    let aaa = true;
    return function () {
      console.log(this);
      aaa = false;
    };
  })();
  mainJump(entry) {
    test.call(this);
  },

解決方法

##形成閉包傳回的函數中, 不要使用箭頭函數, 使用function定義即可

#

    pointJump: (() => {
      let isFirstChanged = false;
      return function () {
        console.log(this); // Vue的顶级对象
        isFirstChanged = true;
      };
    })(),

總結

箭頭函數不會被call, bind等方法改變this指向

###在閉包中返回函數, 快取變數時, 使用function進行傳回函數的定義.#### ########以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########Vue2.0自訂指令與實例的屬性與方法############Vue中父子元件間的通訊# ##############Vue中eventbus的解析#########

以上是如何解決vue中methods中的方法閉包快取的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！