Is there a difference between the following? I've seen examples doing both and am unsure why you would choose one over the other.
Vue.component('test', {
data() {
return { myDataA: 10 };
}
//vs
created() {
this.myDataB = 10;
}
}
Variables set in created() on this will not be reactive. In order for them to be reactive, you must define them in the object returned by data().
Example (note how the text does not change in the output): https://jsfiddle.net/oyf4quyL/
Vue.set(object, key, value) can be used to define new reactive properties for nested objects in data. I feel that this distinction is important. More generally, you should only set properties in created() or another lifecycle hook if you're accepting a prop and want to have a local copy to mutate, and even then any root-level properties need to be defined prior to initialization.
data method, so I always set local copies of prop data directly in the data method, not in created.
in a component, there are three places where you can define you data:
the created property is lifecycle hook in Vue. what this means, is that the Vue will run this function when the component is created. there are also other lifecycle hooks in Vue you can use, like mounted or beforeMount or beforeCreate and etc.
now with this in mind, let's answer your question.
when you define myDataA in data property, Vue will automatically create some "watchers" for this data property, so anytime that you set a new value to myDataA, anywhere that is using it, will be called again. but when you define a property directly on Vue instance (this), you will lose this "watchers" feature. (which by the way is just some getters and setters!)
so as i said, the best way and the correct way to define a data property is on any of the three places that i mentioned, based on your need. (because each of them has different use-cases that the others).
