Vue.js app in real world : reactivity caveats, testing, error handling

Jérôme Morlon
Vue.js Developers
Published in
10 min readApr 21, 2020

--

This is Part 3 of a 5-part series.

Part 0 was the introduction, Part 1 was about organizing our application architecture effectively, Part 2 tackled components best practices, abstracting third-party APIs, authentication and routing, now the goal is to tackle reactivity properly, especially common caveats, but also test and debug your app ! As a reminder, we aim at building a travel application in JavaScript under Vue.js, communicating with a REST API backend.

How to tackle Vue.js reactivity caveats ?

Modern JavaScript framework do an amazing job to ease the development of reactive apps. Yet JavaScript itself, as a language, has limitations so there is only so much that frameworks, even very well crafted ones like Vue.js, can do.

To my mind, this is not that big an issue : you just have to know the caveats and handle them when they arise. Mostly, Vue.js reactivity caveats will occur when you handle large entity objects (or array of objects) modelling your data, and update one of their properties (or one of their members) in some component while expecting the reactivity system to do its magic in parent components. But of course, this would likely not work.

--

--