Vue: My 5 cent after 5 minutes: no rendering for incomplete models?

Created on 1 Dec 2016 · 22Comments · Source: vuejs/vue

This post is from someone who spent 5 minutes with the framework, while using Angular.JS for every day work....

The very first (Hello World!) example takes us to this jsFiddle example: https://jsfiddle.net/chrisvfritz/50wL7mdz/

The very first thing I did, I extended the template to be: {{message}} = {{extended}}. And the view came up empty. Why is it empty, if I'm just extending a template that has some properties already defined in it?

It was only after I added property extended into the model that I was able to see the proper view.

How come the entire model is ignored/skipped unless it is fully defined? This doesn't make sense. Any complex view/template design starts by introducing elements one by one, many of which may be optional, and we cannot even see anything unless everythign has been defined.

This looks like the wrong approach.

Please don't be too judgmental, I just wanted to share my impression after 5 minutes of playing with it, which I think still matters because this is how many newcomers are likely to percieve this framework.

Source

vitaly-t

Most helpful comment

Yes this is different from Angular, and it is intentional. It is required to explicitly declare all root-level reactive properties upfront. This has a few benefits:

Your data serves as the schema of your component state. When maintaining it later, by looking at your component definition you are able to instantly see what properties are available. If you simply dynamically add new properties at random places, it would be a maintenance nightmare, like maintaining a database without a schema.
This results in more predictable behavior, in particular when paired with type-checking systems.
It avoids excessive re-render that might be caused by adding root-level properties.

Finally, as a developer you should be able to choose what browser to develop in. If Chrome 44 is the only browser you can use at your job, that seems like a terrible decision on your companies part. Do all customers of your company use Chrome 44? Probably not.

yyx990803 on 1 Dec 2016

👍4

All 22 comments

Hi, thanks for filling this issue.

The very first thing I did, I extended the template to be: {{message}} = {{extended}}. And the view came up empty. Why is it empty, if I'm just extending a template that has some properties already defined in it?

First of all, I don't know why your view came up empty after changing the template to {{message}} = {{extended}}. It's working fine here. Maybe you have some connection issues to jsfiddle?

And you would have received this error message if you can just open the console:

which I believe has described the error accurately, and is helpful enough to let you fix it:

fnlctrl on 1 Dec 2016

I just want to point out that the example can be edited in order to work

http://jsbin.com/cifegucopo/edit?html,js,output

Edit: @fnlctrl beat me 😿

ludo237 on 1 Dec 2016

I don't have any connection issue to jsFiddler, and the way I described it is exactly how it works for me.

Why was the issue closed immediately?

vitaly-t on 1 Dec 2016

...because there wasn't an issue?
As displayed in my first screenshot, changing template to {{message}} = {{extended}} doesn't cause

the view came up empty

fnlctrl on 1 Dec 2016

If by come up empty you mean the {{extended}} thing doesn't render - are you expecting it to render undefined or something?

How come the entire model is ignored/skipped unless it is fully defined? This doesn't make sense. Any complex view/template design starts by introducing elements one by one, many of which may be optional, and we cannot even see anything unless everythign has been defined.

You can declare properties later on, which wasn't included in the original tiny demo.
Example: https://jsfiddle.net/65b8wfnk/
But it is subject to the reactivity rules of vue's change detection system, more details here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

fnlctrl on 1 Dec 2016

If by come up empty you mean the {{extended}} thing doesn't render - are you expecting it to render undefined or something?

No, I meant empty, nothing comes up at all, not even the value for the message variable. That demo refuses to show anything when I try to use a property in the model that hasn't been declared yet.

I don't understand how it worls on your side, but I definitely have no issues using jsFiddle.

vitaly-t on 1 Dec 2016

No, I meant empty, nothing comes up at all, not even the value for the message variable. That demo refuses to show anything when I try to use a property in the model that hasn't been declared yet.

I can't reproduce the issue from here. It's working fine, as shown in my first screenshot (jsfiddle: https://jsfiddle.net/ong1xjes/). Can you provide some info about your browser/system?

fnlctrl on 1 Dec 2016

I'm seeing 2 errors in the console in that case:

[Vue warn]: Error when rendering root instance: warn @ vue.js:515Vue._render @ vue.js:2893(anonymous function) @ vue.js:2317get @ vue.js:1630Watcher @ vue.js:1622Vue._mount @ vue.js:2316Vue$3.$mount @ vue.js:5833Vue$3.$mount @ vue.js:8095initRender @ vue.js:2854Vue._init @ vue.js:3227Vue$3 @ vue.js:3272window.onload @ (index):45

vue.js:2902 ReferenceError: extended is not defined
    at Vue$3.eval (eval at makeFunction (https://unpkg.com/[email protected]/dist/vue.js:8028:12), <anonymous>:2:79)
    at Vue$3.Vue._render (https://unpkg.com/[email protected]/dist/vue.js:2890:22)
    at Vue$3.<anonymous> (https://unpkg.com/[email protected]/dist/vue.js:2317:21)
    at Watcher.get (https://unpkg.com/[email protected]/dist/vue.js:1630:27)
    at new Watcher (https://unpkg.com/[email protected]/dist/vue.js:1622:12)
    at Vue$3.Vue._mount (https://unpkg.com/[email protected]/dist/vue.js:2316:19)
    at Vue$3.$mount (https://unpkg.com/[email protected]/dist/vue.js:5833:15)
    at Vue$3.$mount (https://unpkg.com/[email protected]/dist/vue.js:8095:16)
    at initRender (https://unpkg.com/[email protected]/dist/vue.js:2854:8)
    at Vue$3.Vue._init (https://unpkg.com/[email protected]/dist/vue.js:3227:5)

vitaly-t on 1 Dec 2016

Ok, now I see what the problem was...

My default browser was Chrome 44. Just as I switched to the very latest Chrome 54 it started working as expected.

What is the minimum Chrome version support? 44 isn't that old, after all...

vitaly-t on 1 Dec 2016

🎉1

Don't know why it failed on Chrome 44..
Anyway, you are able to define data properties later on, and in development if you can eliminate all [vue warn] messages, in production it should work perfectly on any version of Chrome.

About the issue being closed immediately -
We respond fast to new issues, and close issues that appear to us to be non-issues immediately (this is also why vue has the lowest issues count among all major frameworks), but it doesn't mean we discourage further discussions - please feel free to do so. We will definitely re-open issues if evidence was provided later that there was indeed an issue.

fnlctrl on 1 Dec 2016

Ok, in this case it still should be thrown into your browser compatibility backlog,... I won't be the last one to run into this...

vitaly-t on 1 Dec 2016

Missing root properties (in this case extended) is considered an error, which should be resolved before deploying your app to production. We only assure browser compatibility for production, so sorry but it won't be our main concern to support old browsers for development.

fnlctrl on 1 Dec 2016

Something that doesn't work in dev, and perhaps will work in production, somehow, invites little trust, and will surely cause issues with testing.

vitaly-t on 1 Dec 2016

Well, the reasoning can be explained as follows:

We cannot reproduce this behaviour with currently supported browsers in their latestest (auto-updated) versions.
We have limited time and resources to reproduce problems on all possible system and browser compbiantions.
Chrome Version 44, the version you seem to have this problem with (and maybe it's a combination of v44 and some extension?), currently has a market share of 0.08%.
The error you experience is not a bug from using Vue as intended, it only happens when you use Vue in a way you should explicitly not, and if your error does not appear, a dev warning would appear in its place. So there's no danger of it making its way into production.

If we take all of this into account, it seems to me that it's not worth our limited resources to try and hunt down a bug that is not reproducible for us, but may happen for 0.08% of users if someone pushed this wrong code to production.

LinusBorg on 1 Dec 2016

👍3

the only issue with this assumption - the percentage of users that use Chrome 44 or older is much higher than .08, i work in the banking industry, and know it for a fact ;)

vitaly-t on 1 Dec 2016

That's because 44 is the latest NPAPI version?

simplesmiler on 1 Dec 2016

Well, I would assume the amount of people who develop on Chrome <=44 would be very small.

So the real issue is that developers who use these versions might (as its still not confirmed with me that it's simpy the chrome version being the issue) see a white screen during development instead of a nice warning if they use a non-existing data property in a template.

Which, again, will never-ever make it to production.

the only issue with this assumption - the percentage of users that use Chrome 44 or older is much higher than .08, i work in the banking industry, and know it for a fact ;)

0.08 is for v44 specifically. 44 and older are more, yes. But still not significantly, and we don't even know weither those are affected by this failed error-message.
market share across your industrie's customers may be higher, sure. But we have to look at the general market.

LinusBorg on 1 Dec 2016

Just for the record, I work in a huge international bank where Chrome 44 is currently enforced as the default for everyone, without allowing an upgrade, that's how I stumbled upon this issue.

Makes me care little about any other browser usage percentage...

vitaly-t on 1 Dec 2016

Makes me care little about any other browser usage percentage...

I understand that. But you also have to understand that we have to prioritize for global user marketshares, especially if the issue is "low-impact" as it "only" happens to developers who make an mistake. It's not a bug in a feature that could appear for users in production even though the dev followed the Vue API.

But if this is a big problem for you, we are always open to PRs

LinusBorg on 1 Dec 2016

1500+ security related bugs in Chromium since Version 44. :astonished:

Scott

smolinari on 1 Dec 2016

Yes this is different from Angular, and it is intentional. It is required to explicitly declare all root-level reactive properties upfront. This has a few benefits:

Your data serves as the schema of your component state. When maintaining it later, by looking at your component definition you are able to instantly see what properties are available. If you simply dynamically add new properties at random places, it would be a maintenance nightmare, like maintaining a database without a schema.
This results in more predictable behavior, in particular when paired with type-checking systems.
It avoids excessive re-render that might be caused by adding root-level properties.