What is the difference between global methods and instance methods in vue

The difference between global methods and instance methods in vue: 1. The global method is called through "Vue.myGlobalMethod", and the instance method is called through "this.$myMethod"; 2. The global method is defined under vue Static methods and instance methods can be defined inside the component.

The operating environment of this tutorial: windows10 system, vue2.9.6 version, DELL G3 computer.

What is the difference between global methods and instance methods in vue

In development, in order to improve reusability and simplify the code, it is often necessary to The common parts of the code are extracted to form a reusable module. After the code is extracted to form modules, in order to be referenced everywhere, these modules need to be set as global attributes. Therefore, to implement global public methods, we need to know the following knowledge points:

How to set global properties;

How to reference global properties;

1. Set global properties

Global properties can be divided into: global variables and global methods. A common way to implement global variables is to use vuex (the use of vuex will not be explained in detail here). Another way is to use prototype attributes to achieve it. Next, I will focus on prototypes.

2. Reference global properties

When using Vue, we have to write this string of code:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

The above code uses the Vue constructor to create a Vue object.

It can be seen from this that Vue is actually an object. Then we can use Vue's prototype to implement references to global properties. First of all, we need to understand the following knowledge points:

What is a prototype?

In js code, we often see an attribute prototype. It is an attribute of the constructor (the function used to construct an object) and is used to point to the prototype object. So what is a prototype object? To understand "prototype object", we need to separate "prototype" and "object" to explain.

Let’s talk about objects first. There are many built-in objects in js, such as: String, Math, Object, Array, etc.

// 声明一个数组对象
const arr = Array();

The above is to use the built-in object - the constructor of the array to create an array.

Of course, we can also set a custom object, that is, set a new object ourselves.

const obj = {};

The above code sets an empty object.

Vue instances expose some useful instance properties and methods. These properties and methods are prefixed with $ to distinguish them from the proxy's data properties

Component tree

• $parent: used to access the parent instance of the component instance

• $root: used to access the root instance of the current component tree

• $children: used to access the direct child component instances of the current component instance

• $refs: subcomponent used to access the v-ref directive

DOM access

• $el : Used to mount the DOM element of the current component instance

• $els: Used to access the DOM element using the v-el directive in the $el element

Difference

The global method can be understood as window.myGlobalMethod. When called through Vue.myGlobalMethod, it is just a static method defined under Vue.

Instance method, recall Let’s take a look at the concept of classes in JS and the meaning of prototype prototype chain. If you don’t understand it, let’s take a look at these basic contents first.
Here I can explain it to you, the instance method can be called inside the component through this.$myMethod

[Related recommendation: "vue.js tutorial"]

The above is the detailed content of What is the difference between global methods and instance methods in vue. For more information, please follow other related articles on the PHP Chinese website!