vue: add custom property to "this" inside component, and prevent being added "ob" and getter/setter

Question

I want to add a property to this inside a component, and I just want it share this property among component's methods, but not use it inside template.

And I find the only way to add a property to this is to add it inside data() function, like

data() {
  return {
    group: {
      children: []
    }
  }
}

and Vue will make the group has __ob__ & getters & setters for all the attributes

Should I worry about that? Will it cause performance issue if I keep add property in such way? If so, how do I share a variable among component's methods

Husam Ibrahim Husam Ibrahim · Accepted Answer · 2018-12-01T16:10:21

When Vue creates a component instance it walks through each property in your data and creates a getter/setter pair for it in addition to attaching an observer if the property is an object/array. This is in order to make the component reactive to state mutations. It results in a small increase in initialization cost and book-keeping cost, but this is quite negligible for all intents and purposes, so I wouldn't worry too much about that.

There's a great talk titled Demystifying Frontend Framework Performance by Evan You, the creator of Vue, in which he compares different performance aspects of frontend frameworks and describes how Vue's implementation fares in comparison to other frameworks. He outlines the trade-offs he had to make to achieve reactivity and comes to the conclusion that unless you're creating a HUGE app you shouldn't usually worry about a performance hit because of the way Vue works.

Still if you're creating such a huge app and you do run into performance issues you can move any piece of state that isn't reactive to the created hook, and Vue won't track it ..

created() {
 this.group = {
   children: []
 }
}

For objects that won't be modified you can also use Object.freeze() and Vue won't track those either ..

const group = {children: []}
Object.freeze(group)

// Then in your data
data() {
  return {
    group,
  }
}

vue: add custom property to "this" inside component, and prevent being added "__ob__" and getter/setter

2 Answers

vue: add custom property to "this" inside component, and prevent being added "ob" and getter/setter