Menu
I am reading up on Vue components, and find their explanation of why data needs to be a function somewhat confusing:
The root instance
var vm = new Vue({ el: '#example', data: { message: 'here data is a property' } }) A component
var vm = new Vue({ el: '#example', data: function () { return { counter: 0 } } }) The Vue docs explain this difference by assigning a global counter variable to each component, and then they act surprised that each component shares that same data... Also they don't explain why they already use a function here.
var data = { counter: 0 } Vue.component('simple-counter', { template: '<div>{{ counter }}</div >', data: function () { return data } }) Of course the data is shared now
<simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> When you reference a global object as your data source, it's no surprise that the components don't have their own data. That is also true for root Vue instances that have data as a property.
var mydata = { counter: 0 } var vm1 = new Vue({ el: '#example1', data: mydata }) var vm2 = new Vue({ el: '#example2', data: mydata }) So I'm still left with the question why a component can't have a data property?
892
jsassociated with a vue instance. Components are reusable as many times as per requirement. But each time it uses a separate component and also creates a new instance. When we use a data function at that time each instance maintains a separate copy of the return data object. Most of vue.
What is a functional component? Functional components (not to be confused with Vue's render functions) is a component which holds no state and no instance. In more plain English, this means that the component does not support reactivity and cannot make a reference to itself through the this keyword.
A render function returns a virtual DOM node, commonly named VNode in the Vue ecosystem, which is an interface that allows Vue to write these objects in your browser DOM. They contain all the information necessary to work with Vue.
VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
From my understanding of this, It's to save memory
Many frameworks, such as Angular 2 or, (at times) React, make each instance of a component a separate object. This means that everything each component needs is initialized for every component. Normally though, you really only need to keep a component’s data separate for each initialization. Methods and such stay the same.
Vue avoids that pitfall by having data be a function that returns an object. That allows separate components to have separate internal state without needing to fully re-instantiate the entire component. Methods, computed property definitions, and lifecycle hooks are created and stored only once, and run against every instance of a component.
See this
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
