Shulou(Shulou.com)06/03 Report--

Editor to share with you how to fix the problem of this is undefined in Vue, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

When we were using Vue in a pleasant development project, we suddenly reported an error:

This is undefined

Don't worry, you are not the only one. I often encounter this problem many times. Now let's see how to solve this problem.

One possible reason is that you confuse the regular function with the arrow function. If you encounter this problem, I guess you are using the arrow function. If you replace the arrow function with a regular function, it may fix the problem for you.

Let's go a little deeper and try to understand why this is happening.

After all, knowledge is power, and if we know the cause of the problem, we can avoid a lot of frustration and waste of time in the future.

There are other reasons why such errors may also occur.

Use fetch or axios to get data

Use libraries like lodash or underscore

Understand the two main types of functions

In JS, we have two different functions. They work in almost the same way, except that they deal with variables differently.

This brings a lot of confusion to old and new Javascript developers, but it's good to have it when we understand it.

Conventional function

Regular functions can be defined in several different ways.

The first method is less common in Vue components because it takes longer to write:

The second method is abbreviated writing, which we often use:

In a regular function like this, this references the "owner" of the function. Because we define it on the Vue component, this refers to the Vue component.

In most cases, we should use regular functions in Vue, especially when creating

Methods

Computed props

Watched props

Although regular functions are usually what we need, arrow functions are also very convenient.

Arrowhead function

Arrow functions can be written shorter and faster, so they have been widely welcomed recently. However, they are not much different when defining methods on objects, as we did when writing Vue components.

This is what they look like on the Vue component:

When dealing with this problems, the real differences begin to come into play.

The arrow function uses lexical scope, meaning that the arrow function fetches the this from its context.

If you try to access this from inside the arrow function on the Vue component, you will get an error because this does not exist

In short, try to avoid using arrowhead functions on Vue components. This will save a lot of headaches and confusion.

Sometimes it's good to use the arrow function, but it only works if you don't reference this.

Now that we know the two main types of functions, how to use them correctly?

Anonymous function

Anonymous functions are useful when we only need to create a function and don't need to call it from anywhere else.

Here are some scenarios where anonymous functions are used:

Use axios or fetch to access data

Functional methods such as filter, map and reduce

Anywhere in the Vue method

Let's take an example:

As you can see from the example, in most cases, we use the arrow function when we create an anonymous function. We usually use arrow functions for several reasons:

Shorter, more concise syntax

Improve readability

This is taken from the parent class

The arrow function can also be used as an anonymous function in the Vue method.

Wait, didn't we just find out that the arrow function doesn't work when we try to access this?

That's the difference.

When we use the arrow function in a regular function or abbreviated function, the regular function sets this to our Vue component, while the arrow function is different.

Let's take an example:

The filter method can access the this.match because the arrow function uses the same method as the filteredMessages method. Because this method is a regular function (not an arrow function), its own context is set to the Vue instance.

Let's further discuss how to use axios or fetch to get the data.

Use the correct function when getting data

If you are using fetch or axios to get asynchronous data, it is best to use Promise. Promise likes anonymous arrow functions, which also make it much easier to deal with this problems.

If you are getting some data and want to set it on your component, this is the right way to do it:

Notice how we use regular functions as methods on Vue components and then use anonymous arrow functions inside Promise

Within the scope of fetchData (), we set this to the Vue component because it is a regular function. Because the arrow functions use an external scope as their own scope, the arrow function also sets this as our Vue component.

This allows us to access the Vue component and update the dataFromServer through this.

But what if you need to pass the function to a helper library, such as lodash or underscore

Use with Lodash or Underscore

Suppose we have one on our Vue component that uses the Lodash or Underscore method. How to prevent errors in this is undefine.

If you have ever used React, you may have seen something like this.

This is what we do with Vue.

okay!

All we have to do is get the function, wrap it in the debounce function, and return a new function with built-in debounce. Now, when we call this.methodToDebounce () on the Vue component, we will call the debounced version.

What is lexical scope

As mentioned earlier, the main reason for the difference between regular functions and arrow functions is related to lexical scope. Let's analyze its meaning.

First, the scope is any area in the program where variables exist. In Javascript, the window variable has a global scope and is available anywhere. Although most variables are limited to the function that defines them, the class or module to which they belong.

Second, the word "lexical" simply means that the scope is determined by how you write the code. Some programming languages determine what is in scope only when the program is running. This can be confusing, so most languages only use lexical scope.

Arrow functions use lexical scope, while regular and abbreviated functions do not.

The trickiest part here is how lexical scope affects this in a function. For the arrow function, the this is bound to the this of the external scope. The this binding of regular functions is a bit strange, which is why the arrow function was introduced and why most people use the arrow function as much as possible.

How a scope works in a function

Here are some examples of how scopes work differently between the two function types

Bind scope to a function

We can use the bind method to change the binding of the this:

Const boundFunction = unboundFunction.bind (this)

This gives us more flexibility in writing Vue components and makes it easier to reuse methods. Of course, readability is relatively poor, and you should try to avoid using it too often.

The above is all the contents of the article "how to fix this is undefined problems in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.