What are the differences between data and data () in vue

Editor to share with you what are the differences between data and data () in vue. I hope you will gain something after reading this article. Let's discuss it together.

The difference between data and data () in Vue instances where the data attribute new Vue ({el:'# app', data: {message: 'message'}}) is componentized, use export default {data () {return {message:' message'}.

Note:

Data can cause data contamination in large projects (data is global)

Encapsulate the data into a function, and when we instantiate the component, we only call a copy of the data generated by this function, which avoids data contamination.

Detailed explanation of data in vue.js

This article analyzes the data object of Vue.js, data, line by line from the official Chinese document of Vue.js.

Official document address

One of the documents

Analysis 1:

First, the type of data can be Object

Second, the data defined in the component (component) must be of a method type, as to why it will be introduced next.

Part two of the document

Analysis 2:

In the example shown above, there are five properties in the data object of app, which are:

NewTodoText

VisitCount

HideCompletedTodos

Todos

Error

Vue converts these five attributes to getter and setter to control the properties of the access object app. Take the first property, newTodoText, as an example, set getter and setter:

Document number three

Analysis 3:

This is easy to understand, that is, when you can define an attribute in data, you can put an underscore "_" or a dollar sign "$" at the beginning of the attribute name, but you cannot directly access the

At this time, the picture will report an error, showing _ first is not defined. Figure 2 is the correct posture.

Document IV

Analysis 4:

This is the problem to be solved in analyzing why the data defined in the component must be a method type, and that is why, in a project, each component may be used to create multiple instances, and their properties of the instance of this component cannot be shared! It means that the property change of component A cannot cause the change of the same property of component B. it is easy to figure it out with the knowledge of prototype chain.

After reading this article, I believe you have a certain understanding of "what is the difference between data and data () in vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!