Vue - The Road to Enterprise/

...

/

Reactivity Caveats

Reactivity Caveats

Learn how the reactivity system has changed in Vue 3.

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 ...