Why is data a function in vue components

This article is about why data is a function in vue components. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Why is data a function in a component?

Why does the data in the component have to be a function and then return an object, while in the new Vue instance, data can be an object directly?

/ / datadata () {return {message: "subcomponents", childName:this.name}} / / new Vuenew Vue ({el:'# app', router, template:', components: {App}})

Because the component is used for reuse, and the object in the JS is a reference relationship, if the data in the component is an object, then the scope is not isolated, and the data attribute value in the subcomponent will influence each other. If the data option in the component is a function, then each instance can maintain an independent copy of the returned object, and the data property value between the component instances will not affect each other. Instances of new Vue are not reused, so there is no problem of referencing objects.

Thank you for reading! This is the end of this article on why data is a function in vue components. I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!