- It uses
Proxyto watch when a property is mutated. It works in the same way Mobx does. By using aProxyyou can know which properties are being mutated, so you notify the subscribers. In fact, the “Magic” is also that by just accessing a property, you can know (by usingProxyagain) which properties are being listened. For example:
import { autorun, observable } from 'mobx'const obj = observable({
name: 'Example'
})autorun(() => {
console.log(obj.name) // < Now `name` is being observed
}) // Logs: Exampleobj.name = 'Other'
// Logs: Other
Of course, VueJS doesn’t seem to explain it in the docs because as well as Mobx does because it focuses more on its purpose as a View lib rather than teaching you what is and observable and how it works internally.
To sum up, with VueJS you directly mutate the state and it watches for changes using Proxy internally (let’s call it observable), so it’s faster than React/Redux copying the whole object and its properties.
All this has its props and cons. On one side, working with immutable state allows for easier reproduction of previous state and serialization. On the other side, mutating state directly and observing properties is faster but you can’t easily keep the previous state.
To be fair, probably comparing React + Mobx vs VueJS would have been a better example.
Besides that:
- JSX is transformed to JS code (React.createElement) while VueJS templates are at runtime. Even though, there is probably some preset for babel or a webpack plugin that allows this for VueJS ??
- VueJS uses
Functionconstructor to create .. well a function from directives:
<li v-for="item in items">
{{ item.message }}
</li>It creates a new function using the Function constructor to evaluate directives item in items and what’s in the brackets {{ item.message }} which I personally don’t like.
