Improved guide instance.md examples

[fenekku]

I was going through the guide to learn Vuejs and was confused by 2 of the examples that turned out not to work. I corrected them here (I hope ;) ).

• Made some examples stronger by making sure that if their corresponding statements were false, the examples would indeed pick up on it:
  • comparing integers will not highlight that they are the integers from the same location in memory
  • fixed the freeze example such that if commented it out, it would work

[chrisvfritz]

@fenekku Thanks! Here are my thoughts:

comparing integers will not highlight that they are the integers from the same location in memory

I worry this example is actually more confusing (and contrived, as we would probably never assign a number to a property that previously held an object). We also demonstrate adding a new b property later, which is unrelated to this original property. Finally, it's not an area where we've noticed confusion in the past, so I'm hesitant to make it more complex.

fixed the freeze example such that if commented it out, it would work

Can you explain more about what you mean here? In the current example, commenting out the Object.freeze would indeed work.

[fenekku]

Thanks for the comments! Here are my thoughts:

Finally, it's not an area where we've noticed confusion in the past, so I'm hesitant to change make it more complex.

Haha well I was confused by it ;) . More to the point, should we remove:

// These reference the same object!
vm.a === data.a // => true

then? Or maybe rephrase it (see below). My main problem is that using the above === equality, with a being an integer, does not prove that vm and data point to the same object (even less that vm.a and data.a point to the same object since a is not an object). Maybe we can have the following:

// Getting the property from the instance
// returns the one from the original data
vm.a == data.a // => true

What I like about this approach is 1) solves our above problem 2) uses the word getting and since setting is mentioned later this builds up to the setters/getters concept. I changed the commit to this.

In the current example, commenting out the Object.freeze would indeed work.

My mistake, you are absolutely right! Because I wasn't familiar with the data() { } syntax as opposed to the data: {} syntax that was used up until now (and forgot the object destructuring syntax), I had changed the syntax of the example and was getting obj not defined. Maybe introducing the data() { } syntax before using it for the first time in this example would remove a confusion point. I left the commit as is, but I can change it if need be.

[chrisvfritz]

I like it! Thanks for the improvement. 🙂