Comment by roblabla | Hacker News Reader

Comment by roblabla | Hacker News Reader

Parent Full thread

I recently tried out vue.js on a projet as a replacement to d3's selection/data-binding magic. I have to say, I've been impressed.

1. The API surface is fairly small, especially compared to Angular. I could grok how it worked very fast.

2. The fact that it works without build tools is a godsend. My project is fairly small, and having as fast an iteration cycle is really nice.

3. The debug tools are awesome. EDIT: https://github.com/vuejs/vue-devtools

However, I do have a BIG problem: the fact that mutating the data automatically does a rerender is a nice idea, but in practice it falls apart very quickly and leads to fairly hard-to-debug bugs. For instance, if I add a new field to an object, it will not be detected as a change by Vue and not cause a rerender[0]. In my case, it broke the magic and caused me to look into how the heck did vue actually work - only to find out I had to call this.$forceUpdate() in a few places. It's terrible.

React, despite its problems, is nice because of exactly this : its data binding is entirely non-magical. You have to go through setState or force an update. The mental model is dead simple. I wish I could like vue more...

[0] It is somewhat documented here: https://vuejs.org/v2/guide/instance.html#Data-and-Methods among other places

Why not just add your property with "vue.set()"?

I feel you could have avoided this "awful" pain by just reading a little documentation.

I mean, how exactly did you think your new property would be picked up? I know frameworks are supposed to abstract over things but you do still need some idea what's happening under the hood.

Vue.set is the way to go here, which used to be more prominent in the docs. The section that called this out (along with other reactivity "gotchas") has apparently been removed from the latest version.

Here's an archive link: http://web.archive.org/web/20170711045330/https://vuejs.org/...

They moved it. It's under List Rendering now in the guide. I have no idea why. https://vuejs.org/v2/guide/list.html#Object-Change-Detection...

The problem is, Vue.set is documented exactly nowhere in the getting started guide[0]. In my case, I couldn't use it because I wasn't the one modifying the data binder, d3-force was. But either way, this should definitely be in the guide !

Besides, it's possible for the new property to be picked up through Proxy Objects[1]. So it's not like it's entirely impossible for Vue to do this, they just chose not to (and they probably have good reason, like IE support).

[0]: https://vuejs.org/v2/guide/index.html

[1]: https://caniuse.com/#feat=proxy

I spend a good amount a time answering questions in the Vue StackOverflow tags. While this is documented, it's nevertheless something a huge amount of people stumble over. I'd say the change detection caveats are right behind "this" issues (which isn't really a Vue issue, just javascript) in terms of the most common problems I see in Vue code.

> I mean, how exactly did you think your new property would be picked up?

If mutations of existing properties are picked up, one could naturally expect that addition of new properties would also be.

Thanks for the hint. This will help me in my own project.

One question: Which objects will Vue attach observers to? Just props and data? I sometimes reference objects in Computed values, but those objects never seem to force re-rendering when they're changed.

> You have to go through setState or force an update.

There's a third one where you re-render the tree from the root.

I just recently started using Vue for a small project at work and agree with a lot of what you said.

When you refer to the debug tools, are you referring to the Chrome extension or something else?

Yes, the chrome/ff extension.

Reply on news.ycombinator.com