General FAQ

[yyx990803]

Use this thread for simple, quick questions to avoid cluttering the issue list. Alternatively you can try the #vuejs IRC channel on freenode.

Also, read the wiki FAQ first.

[cmenke]

Hi! Just started toying with vue.js and ran into an issue when nesting 2 data collections using "repeat" directives. Displaying the data is working fine -- however when an Element (with its subordinate VMs) is destroyed, bound data is currently removed as well (by the "hook:afterDestroy" listener).

Example here: http://jsfiddle.net/sAa9X/ (try clicking any of the items.remove(n) buttons).

Is this unintended behaviour, or is there a better approach I can use?

[yyx990803]

interesting... I haven't considered this type of usage before. maybe I should remove that behavior.

[dyu]

Hey Evan, first off I think you're doing a great job with vue.
In my case, POJOs and composability are the difference maker (also the speed ofc).
So my question, is this done on your 20% or are you doing this full time (like those angular guys .. e.g 100% Google sponsored)

Thanks

[yyx990803]

@dyu Thanks! This is a 20% project at the moment, but we've started using it in new projects here at Creative Lab, so there's potential that I can dedicate a more substantial part of my fulltime bandwidth to this in the future.

[cmenke]

I think I'd be in favour of this and handle related data explicitly (if necessary). Thanks for looking into it, I really enjoy using vue so far!

[yyx990803]

@cmenke Thanks. After thinking about it, I think your suggestion makes sense. Originally I added that hook because I wanted to allow users to manually $destroy repeated instances in expressions, but now that I've seen your example, I believe it's problematic and in general a bad practice (not your example, but manually $destroying repeated vms). The proper way is simply manipulate the source data Array. So in the latest v0.8.5b patch I've reverted that behavior.

[Charuru]

Can you say a few words about how this is different / better than angular and where it's more suited?

[yyx990803]

@Charuru there are a few reasons to use Vue over Angular, although they might not apply for everyone:

1. Vue.js is a more flexible, less opinionated solution. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It's only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. It gives you bigger room to mix and match with other libraries. This is probably the most important distinction.
2. Vue.js is much simpler than Angular in general, so you can learn almost everything about it really fast and get productive.
3. Vue.js has better performance because it doesn't use dirty checking.
4. Vue.js has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while Components stand for a self-contained unit that has its own view and data logic. In Angular there's a lot of confusion between the two.

But also note:

1. Vue.js is a relatively young project, while Angular is battle-proven and has a larger community. So if you want something for a large, serious production app you might want to pick Angular.
2. Vue.js only supports IE9 and above while Angular suppots IE8.

[tomByrer]

The ^ above post would be great in a WiKi FAQ!
BTW, Angular 1.3 will be IE9+ only. Still no beta for it ATT.

[yjeroen]

Hi Evan,

This week I've been evaluating what frontend framework I should use and arrived at Angular and React. Then I found yours, and I must say I really like the clear style of VueJS.

I understand that Angular has the problem that it gets really slow when it creates a lot of watchers with for example ng-repeat. I found a nice article about that which says "The conventional wisdom for AngularJS says that you should keep the number of data-bound elements below 200."

Now I wonder: Does VueJS have a similar problem with scaling of data-bound elements? Or is the fact that VueJS doesn't use dirty checking the winning factor?

Then why does AngularJS use dirty checking at all?

[yyx990803]

@yjeroen Angular gets slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Vue.js doesn't suffer from this because under it uses an event based observing mechanism, so all changes trigger independently unless they have explicit dependency relationships.

I believe Angular uses dirty checking because it had to support IE8. Vue.js is able to get the plain object syntax using ES5 features, which IE8 doesn't support. On the other hand, dirty checking also has the benefit that the original data objects are not modified in anyway (Vue.js converts object properties into getter/setters.)

[yjeroen]

@yyx990803
Thank you for the elaborate response. What can be a disadvantage from using change listeners and changing the original object? And is that something a developer needs to be aware of, or is that 'disadvantage' taken care of by Vue.js?

[yyx990803]

@yjeroen
There are some very minor caveats:

1. When you console.log observed objects you will only see a bunch of getter/setters. You will have to JSON.stringify them first.
2. You cannot define your own getter/setters on data objects. This isn't much of a problem because data objects are expected to be obtained from plain JSON and Vue.js provides computed properties.
3. Vue.js sometimes have to attach hidden properties ($index, $key, $value, $repeater and __emitter__) to data objects in order to observe them. If the developer accidentally overwrite these properties it would break. But it's very rare to run into such situations and they are very easy to avoid (just don't set anything that start with $ on your data objects).

Apart from the above caveats, you can use Vue.js observed objects just like normal objects. JSON.stringify and for ... in ... loops will work as intended. So 99% of the time you don't even need to worry about it.

[adamgd]

I am trying to update array items in a Vue data object. I have tried using v-model:

http://jsfiddle.net/obomoboe/HM9rn/1/

and have tried specifying a handler so that I can be specific about what I am assigning from/to:

http://jsfiddle.net/obomoboe/HM9rn/2/

Neither one will update $data. When I look in the debugger at the update method, both values evaluate as I would expect them to, but it still doesn't seem to update the VM. I'm sure I've missed the point, but where?