1

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.