Why does Vue.js rename / move all the internal data elements?
https://softwareengineering.stackexchange.com/questions/390943
-
24-02-2021 - |
Question
I'm following the code from Vue.js in Action, Chapter 3. (much deleted for brevity...)
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
product: {
id: 1001,
title: "Cat Food, 25lb bag",
... deleted for brevity
},
cart: []
}
methods: {
addToCart: function() {
this.cart.push( this.product.id );
},
showCheckout() {
this.showProduct = this.showProduct ? false: true;
},
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
canAddToCart() {
return this.product.availableInventory > this.cartItemCount;
}
},
filters: { ... }
})
Looking at the code in
methods
orcomputed
, it doesn't refer tothis.data.cart
, but tothis.cart
. That is, Vue moves all the fields from data up a level. This can be confirmed by looking at the webstore variable in the Chrome console. Is saving 5 characters of typing really worth the confusion? And possible errors - what if I have something in my data that has a name collision?Vue moves the functions from methods up a level - there is no
methods.addToCart()
, instead there isaddToCart()
. Again, is saving a little typing worth the confusion and risk of namespace errors?Further looking in Chrome, the
data
field is no longer called data, it is now_data
. It may also be found under$options.data
.
I'm sure there's more examples, but this is a start. Is there a good technical reason why Vue magically rearranges this basic stuff?
No correct solution