5 ms·
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
by roblabla 9y ago
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 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 https://vuejs.org/v2/guide/instance.html#Data-and-Methods among other places
- alelefant 9y agoI 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?
- roblabla 9y agoYes, the chrome/ff extension.
- jbreckmckye 9y agoWhy 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.
- gcr 9y agoThanks 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.
- roblabla 9y agoThe 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 https://vuejs.org/v2/guide/index.html [1]: https://caniuse.com/#feat=proxy https://caniuse.com/#feat=proxy
- masklinn 9y ago> 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.
- fishtank 9y agoVue.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/v2/guide/reactivity.html#Change-Detection-Caveats http://web.archive.org/web/20170711045330/https://vuejs.org/...
- alevans4 9y agoThey 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-Caveats https://vuejs.org/v2/guide/list.html#Object-Change-Detection...
- 9y ago
- masklinn 9y ago> You have to go through setState or force an update. There's a third one where you re-render the tree from the root.