How to solve the problem of method closure caching in methods in vue

This article mainly introduces how to solve the problem of method closure caching in methods in vue. It has certain reference value. Now I share it with you. Friends in need can refer to it

vue中Method closure caching problem in methods

Problem background

Requirement description

• It is required in the navigation bar of the route to determine whether it is the first time Click

• Needs a flag to record whether clicked

• Current situation:

• # #This flag is only used in one function. I don’t want to store the global

• I hope to form a closure in this methods to cache this function

• After making the following attempts, we found that it can be achieved.

• Current problem:

• cannot be closed The correct this is found when the package is called.

Weird point

• When tested: the returned this is found in 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 in the actual project became

  undefined

##What’s even weirder is that after
• debugger

  , let’s look at the

current code step by step:

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

Operation:

Refresh the page, the first function will be executed immediately

1. 

After the page generation is completed: We trigger the event through the button again:
2. At this time, the debugger displays the top-level object of Vue in the memory, but what is printed on the console is still undefined

Execution process analysis

First It is normal for it to be undefined when executed for the first time, because the first time the closure was executed, this
was not found. When we executed it again, although the calling context, that is, this has been It has been changed, but because the space represented by
• this

  in the scope is still undefined, it cannot be changed.

causes The strange phenomenon we saw.
The reason why it is different from the test file

is because in the test environment, it could not be opened Strict mode.
After two attempts to open it at different locations, both failed.
The window object can still be found
It is now speculated that it is implemented inside vue, because the introduced vue version is different.
• It needs to be tested again, and you still need to go through it carefully to see the source code

    <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>

The final test to find the reason

Because the this of the arrow function will not change, it has this that can be returned by the parent
Then because this in the above closure environment always points to
• undefined

  ##

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

  Solution

In the function returned by the closure, do not use arrow functions, just use function definitions

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

  Summary

Arrow functions will not be changed by call, bind and other methods to change this pointer

• When returning functions in closures and caching variables, use function to define the return function.

• The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Vue2.0 custom instructions and instance properties and methods

Communication between parent and child components in Vue

Analysis of eventbus in Vue

The above is the detailed content of How to solve the problem of method closure caching in methods in vue. For more information, please follow other related articles on the PHP Chinese website!