Can't data in vue component be a function?

No, the data in the vue component must be a function. Components in Vue are used for reuse. In order to prevent data reuse, they are defined as functions. The data data in the vue component should be isolated from each other and not affect each other. Every time the component is reused, the data data should be copied once. Later, when the data data in the component is changed in a reused place, other data will be copied. If the data data of reused local components is not affected, you need to return an object as the status of the component through the data function.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

When defining a vue instance, the data attribute can be either an object or a function

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

However, the data attribute defined in the component can only be a function

If the component data is directly defined as an object

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }
})

, you will get a warning message

Warning description: The returned data should be A function in each component instance

Why is the data attribute a function instead of an object?

The data attribute in the Vue component cannot be an object. The reason is that the object is a reference type. The component will be referenced by multiple instances at the same time. The result is that multiple instances share an object and one of the components changes. If the value in the data object is deleted, other instances will also be affected.

As shown in the figure, after the component is reused, randomly clicking a button in one of the components will also affect the values ​​of the other two components

##vue The reason why the component data is a function: data is a function, and by returning the object, each instance can have its own independent object, and the instances do not affect each other; as shown in the figure below

Conclusion

The root instance object data can be an object or a function (the root instance is a singleton), and no data pollution will occur

The component instance object data must be a function. The purpose is to prevent multiple component instance objects from sharing the same data and causing data pollution. In the form of a function, it will be used as a factory function when initData will return a new data object

Description:

• The components in vue are used Reusable, in order to prevent data reuse, define it as a function.

• The data data in the vue component should be isolated from each other and not affect each other. Every time the component is reused, the data data should be copied once. After that, when a certain place is reused When the data data in the used local component is changed, the data data of other reused local components will not be affected, so you need to return an object as the status of the component through the data function.

• When we write the data in the component as a function, the data is defined in the form of function return value, so that every time the component is reused, a new data will be returned, with its own Scope is similar to creating a private data space for each component instance, allowing each component instance to maintain its own data.

• When the date of our component is simply written in object form, these instances use the same constructor. Due to the characteristics of JavaScript, all component instances share one data, so It will lead to a result that changes everything.

(Learning video sharing:

web front-end development, Basic programming video)

The above is the detailed content of Can't data in vue component be a function?. For more information, please follow other related articles on the PHP Chinese website!