Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Reactivity Caveats

Explore the differences in reactivity systems between Vue 2 and Vue 3. Understand Vue 2's reactivity limitations such as property addition and array change detection, and discover how Vue 3's Proxy implementation resolves these issues. This lesson helps you grasp key migration challenges and enhancements in Vue 3's reactive data handling for large-scale applications.

We'll cover the following...

One significant change coming with Vue 3 is the reactivity system implementation.

Vue 2

In Vue 2, to make data reactive, getters and setters of Object.defineProperty were used. However, this came with a few reactivity caveats.

For instance, to ensure the reactivity of a property on a data object, it must be added to the state during initialization. Vue 2 can’t detect property addition or deletion, as shown in the example below:

Javascript (babel-node)
const vm = new Vue({
	data() {
		return {
			count: 1,
			user: {}
		}
	}
})
// vm.count is reactive
vm.user.name = 'Max'
// vm.user.name is not reactive

However, new properties can be added using the Vue.set method or the this.$set method available on Vue’s component instance.

JavaScript (JSX)
Vue.set(vm.user, 'name', 'Daisy')
// or inside of a component
this.$set(this.user, 'name', 'Lincoln')

Moreover, Vue 2 is unable to detect the following array changes:

  1. When setting an item using an index, like, vm.items[itemIndex] = newValue
  2. When modifying array length, like vm.items.length = newLength

The first can be addressed by using the Vue.set or splice method ...