vuejs
Deep watch
Is there any way to understand what value was changed in deep observation?
Case usage: Undo :) I've got a bunch of objects and when data changes I'd like to record the changes so that they can be undone if required. I could write a function to compare object arrays, but with a lot of data and things being moved around the screen its very expensive in terms of cpu.
Would be great if there was a 3rd parameter with key or something, then I can pluck the old value and send to a stack. Thoughts @yyx990803 ?
It's easier to just take snapshots by cloning the object on each change, and just replace the object with a saved snapshot when you need to undo something.
The problem is it's a pretty becoming a large array of objects (Widgets on a screen designer) so saving for example just the changes would be ideal, hence the question. The other problem with cloning the whole thing is that as it's drag and drop x/y coords update quite frequently leading to a lot of "watches" being triggered, making a lot of redundant undos.
Implementing undo with arbitrary mutation is hard -- it's possible with diffing, but not an ideal approach. You probably want to adopt some flux-like restrictions where any state mutation must be triggered through an action. Each action defines what mutations it would apply to the state, and how it could be reverted. Then, you can just record the actions triggered and do rollbacks if necessary.
Is there any way to understand what value was changed in deep observation?
Not really. See #336
So there is no way to know what key caused the watch to occur then? :) Yes I could look at flux or other things but at present this is a small learning exercise for me.
@Mat-Moo for objects, no. It's possible to to provide splice information on Array mutations, but overall I'd recommend taking a different approach instead of going down the "watch then do imperative changes" route.
I'd recommend taking a different approach instead of going down the "watch then do imperative changes" route.
I ran into the problem when I saving data to a server. How could I do that other than imperative? As it is now every time I modify data I have to call a function to save the data. That defeats the whole reactive paradigm.
On Fri, Sep 11, 2015 at 7:26 AM, Evan You [email protected] wrote:
@Mat-Moo https://github.com/Mat-Moo for objects, no. It's possible to to provide splice information on Array mutations, but overall I'd recommend taking a different approach instead of going down the "watch then do imperative changes" route.
— Reply to this email directly or view it on GitHub https://github.com/vuejs/Discussion/issues/389#issuecomment-139560448.
Vue instances are VM objects, as in MVVM. You should move business logic outside of it. Then your vue instance will reactively update when its internal model (or a shared model) will change as an effect of mutations triggered by your business component. I used to solve this with an even based (broadcasting) approach but Flux pattern is more elegant and robust (if correctly implemented). You could have a look at Vuex
