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

This article mainly introduces "what are the differences between global methods and instance methods in vue". In daily operation, I believe that many people have doubts about the difference between global methods and instance methods in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts about "what is the difference between global methods and instance methods in vue?" Next, please follow the editor to study!

The difference between the global method and the instance method 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 a static method defined under vue, and the instance method 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 the global method and the instance method in vue

In development, in order to improve reusability and concise code, it is often necessary to extract the common part of the code to form a reusable module. When the code is extracted to form modules, in order to be referenced everywhere, you need to set these modules to global properties. Therefore, to implement the global public approach, we need to know the following knowledge points:

How to set global properties

How to reference global properties

First, set global properties

Global attributes can be divided into global variables and global methods. The common way to implement global variables is to use vuex (the use of vuex is not detailed here), and another way is to use prototype properties. Next, I will focus on the prototype.

Second, reference global attributes

When using Vue, we all write this string of code:

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

The above code creates a Vue object with the help of the Vue constructor.

From this, we can see that Vue is actually an object. Then we can use the prototype of Vue to implement the reference to global properties. First of all, we need to know the following knowledge points:

What is a prototype?

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

First of all, there are many built-in objects in js, such as String, Math, Object, Array and so on.

/ / declare an array object const arr = Array ()

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

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

Const obj = {}

The above code sets an empty object.

The Vue instance exposes some useful instance properties and methods. These properties and methods are prefixed with $to distinguish them from the data properties of the agent

Component tree

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

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

$children: the immediate subcomponent instance used to access the current component instance

$refs: a subcomponent used to access v-ref instructions

DOM access

$el: the dom element used to mount the current component instance

$els: used to access the DOM element in the $el element that uses the v-el directive

Difference

Global method, that is, can be understood as window. Like myGlobalMethod, calling through Vue.myGlobalMethod is just a static method defined under Vue.

Instance method, recall the concept of the class in JS, the meaning of the prototype prototype chain, if you don't understand, take a look at the basic content.

It can be explained here that the instance method can be called inside the component through this.$myMethod

At this point, the study on "what is the difference between the global method and the instance method in vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.