Vuejs.org: Mention Object.freeze in documentation

[sherzinger]

I feel it would help many people to mention "Object.freeze" somewhere in the documentation. Maybe some best-practise section when dealing with back-end data.

This becomes very relevant when storing AJAX responses in the state of your component. Usually this data will never change partially, but only as a whole. Not freezing it will heavily impact the performance of the entire component. Freezing the server response (possibly recursively) will prevent this from happening.

Example:

...
data() { 
    foo: 1, 
    serverResponse: null
}
...

vm.foo = 2    <-  fast
vm.serverResponse = {...}  <- large AJAX response
vm.foo = 3 <- very slow
Object.freeze(vm.serverResponse)  <- if data are nested you'll need to do deep/recursive freeze
vm.foo = 4 <- fast

I am not familiar with the inner workings of Vue, but I assume this happens because Vue recursively tracks serverResponse properties.

[chrisvfritz]

Your assumption is correct. When the object is frozen, Vue skips the step of making each property reactive. I'll find a good place to add this. 👍

[akarelas]

Since we don't have documentation on this yet, may I suggest that documentation also mentions what happens if you freeze the object before assigning it to vm.something, ie whether vm.something will be responsive or non-responsive in that case.

[sdras]

We've now documented Object.freeze to clarify this, though we haven't made mention of the speed increase for a large amount of backend data as you've mentioned. I think that might be better served as a cookbook example, as it's a pattern that would need some clarification. I'll put it on my list to add there. Thanks!