Website shows

dataIt has to be a function

preface

The previous chapter explained the definition of Vue components and how they are created globally and privately, and related considerations. So let’s take another look at data in this chapter.

In a VM instance, data can be defined directly as follows:

However, an error is reported if data defines property values in this way in the component. And it must be a function, as illustrated step by step.

Example 1: Data in the component defines property values to verify that an error is reported

1. First execute a VM like example to define the value of the data property

2. Open the browser and view the information

As you can see from the error message, data in the component can only return a function, if the value is defined directly, then the error will be reported directly.

3. Modify data to return a function method

4. Open the browser and view the information

Is this how you set data to the component?

In fact, if set up this way, single component use is fine, if multiple components use, then there is a problem.

Example 2: Set a data problem for data in a component that has been applied multiple times

1. Start by writing a button that changes the data in a component

2. Render only one component on the page and click the button to see the number change

The following information is displayed:

You can see that by clicking the button, the number can be increased. So what happens if you render multiple components?

3. Render the page component multiple times

The following information is displayed in the browser:

At this point, different buttons are clicked and the data data between components is separate, which is normal.

But sometimes, data can be written as a bad data share.

4. Set the component data to the same value so that multiple components share the value

Data = components_data = components_data = components_data;

As you can see, a click of the button changes the values in all three components simultaneously.

5. The best simplification, avoiding data sharing, should not return a data object, each component should return a new object

The situation on the browser reverts to step 3, where the component has a separate num value as follows:

For more original Devops articles, check out my Devops community: