CODEWITHSUNDEEP
javascriptvuejs2
Arsen Karapetjan
Arsen Karapetjan

Reputation: 113

Vue.js reactive concept

i did read about reactive concept in vuejs. https://ru.vuejs.org/v2/guide/reactivity.html.

And i checked this concept. For every properties in object rewrite native getter and setter. How deeply the properties are rewritten? And how does this affect performance?

Upvotes: 1

Views: 300

Answers (1)

For the Name
For the Name

Reputation: 2529

Anything that is declared in data() is reactive, irrespective of how 'deep' it is.

If you mutate an array or add properties later to an object you can break reactivity. My tips are to

  1. always replace arrays (it's just easier). We use _.filter and _.reject a lot.
  2. always use this.$set(object, 'property', value) when setting something in an object. I made our programmers ALWAYS use that because that really does save problems with reactivity breaking.

In terms of performance, I am building an application with big lists on a page (arrays with totals of 10,000+ objects with at least 20 properties in each object). It has been handling everything just fine. I did get some performance issues with memory leaks, but I was able to fix them by setting the arrays to [] on beforeDestroy().

With Vue, it really is easier to have all your data stay reactive. This allows you to inspect it with the Vue Devtools and more easily rely on its behavior. Vue does very funky stuff when data is not reactive or when reactivity breaks.

Upvotes: 1

Related Questions