A nice example for how to prompt a user to save unsaved changes before changing routes.

SPAs:

• popularised by client-side web frameworks like Angular, React and Vue.js
• real difference between the MVP app is shifting most of its work on the client side
• there's client side MVC, MVVM (model-view-view-model) and FRP (functional reactive programming)

Angular - client side MVC framework following its pattern, except it's running inside the users web browser.

React - implementation of FRP. A little more flexible, but more concerned with state change events in data (often using some event store like Redux)

Seems like it could be useful at some point.

Really useful example of explaining what not to do and how to simplify code.

Actions are asynchronous vs mutations which as synchronous.

So for example an action may be a combination of mutation calls and async api calls.

When you create a vue component you must give it a name:

<script>
export default {
  name: "TodoItem",
}
</script>

The following binds a class on a condition in order to apply conditional styling:

<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">

Styling can be scoped to just the component with the scope denotation below:

<style scope>

</style>

When looping in the template the variable must be unique so we use v-bind:key and give it the id of the object as shown below:

<div v-bind:key="todo.id" v-for="todo in todos">
   <h3>{{todo.title}}<h3>

Really nice vue plugin for chrome dev tools-looks like it's worth installing.

Benefits are evident and good, imho. A big improvement in code organization and separation of concerns.

Just, I think the new syntax suffers from the loss of, as you said, that easy-to-understand-separation-by-type, that is appealing and clearer to newcomers and people that deal with pretty simple components. The component code is divided in three different sections (State, Computed, Methods) that are easy to scroll and to keep conceptually segregated.

That's one appealing aspect for beginners, helping them to grab the main concepts and organization of Vue. Also helps giving some simpler view to who not too confident with JS and its patterns. With this "separation by function" the beginner is more disoriented since has to import state & computed as functions to place in specific points. Places that they need to know/remember, rather than just filling up the three object provided in module.exports (and I suppose there are packages that build a basic .vue template for you; maybe vue-cli itself too, that people get used to blindly use).

So in the end the new syntax gives in my opinion a lot more power in modelling, but requires to accept some compromises with the somehow more verbose syntax (const everywhere; return & export providing private/public but necessarily longer to write) and with the slightly higher shadiness of its main concepts.

Still, a good & efficient & clear documentation, as it was on Vuejs.org until today, will for sure easily compensate to these drawbacks and bring the most out of this new -more OOP- approach. For me also class could be use here, but I like trying to stay compatible using the prototypical approach (maybe also less overhead? Dunno, I'm not so deeply in the JS world).

I am actually pretty curious to see how it is gonna evolve. And I am glad I didn't engage with Vue too much yet... 😜

Lifecycle hooks, not controllers.