Principle of Reactivity

The reactivity principle of Vue 3 is based on the mechanism of Proxy and getter/setter. It achieves reactive updates by intercepting the access and modification operations of objects.

Important

Main Principle Overview

• Proxy: Vue 3 uses JavaScript's Proxy object to implement reactive data interception. Through Proxy, we can listen to the read and write operations of objects, as well as other behaviors (such as deleting properties).
• Dependency Collection: When the component is rendered, Vue records the dependencies of these properties (i.e., where these data are depended on) when accessing the properties of reactive objects. When the data changes, Vue triggers the update of dependencies, thereby achieving automatic view updates.
• Lazy Proxy: Vue 3's reactivity system adopts a lazy proxy strategy, where the proxy operation is only triggered when a property is accessed. This improves performance and avoids unnecessary proxy operations.

Working Mechanism of Proxy

Proxy is a new object mechanism added in ES6 that allows us to define custom behaviors to intercept and modify operations on objects. The constructor of Proxy accepts two parameters: the target object and the handler object.

Reflect Used with Proxy

In short, Proxy is used to intercept the operation behavior of objects, and the second parameter of the Proxy function defines how to intercept. When the default behavior of the operation needs to be executed, Reflect is used.

Reflect provides a series of static methods that correspond to the native operation methods one by one. When the native operation needs to be executed in the interception operation, the corresponding static method of Reflect is called and returned.

Why Vue 3 Uses Proxy Instead of Object.defineProperty

Vue 2 uses Object.defineProperty to implement reactivity, but this method has some drawbacks:

• Cannot listen to newly added/deleted properties: Object.defineProperty can only listen to existing properties of objects and cannot listen to newly added properties.
• Performance issues: Vue 2 needs to define getter and setter for each property, which leads to performance issues.

Vue 3 solves these problems by using Proxy:

• Supports adding/deleting properties: Proxy can intercept any operation, including adding and deleting properties.
• Performance optimization: The implementation of Proxy is more flexible and efficient, with better performance than Object.defineProperty.

ref and reactive

ref for simple values, reactive for complex objects.

The role and scenarios of toRefs and toRef.

Note

toRefs is a function used to convert the properties of a reactive object into reactive references. It can turn each property of an object into an independent ref, so that the reactivity is maintained when destructuring the object.

import { reactive, toRefs } from 'vue';
 const state = reactive({
   count: 0,
   name: 'Alice'
 });

 // Use toRefs to convert the properties of the reactive object into reactive references
 const { count, name } = toRefs(state);

 // Can access count and name like using ref
 count.value++;  // Update count
 console.log(count.value);  // Output: 1
 console.log(name.value);   // Output: Alice

• toRefs converts each property (count and name) of the state object into an independent ref.
• This way, when destructuring the state object, count and name remain reactive.

Why use toRefs?

When passing a reactive object to a component or external function, destructuring the object will break the reactivity of the object. Using toRefs can maintain the reactivity of each property.

Note

toRef is a function used to convert a single property of a reactive object into a reactive reference. It creates a new ref that references the specified property of the reactive object and maintains reactivity.

import { reactive, toRef } from 'vue';

 const state = reactive({
   count: 0,
   name: 'Alice'
 });

 // Use toRef to convert a property in state into a reactive reference
 const countRef = toRef(state, 'count');

 // Can access countRef like using ref
 countRef.value++;  // Update count
 console.log(countRef.value);  // Output: 1

• toRef(state, 'count') converts the count property in state into an independent reactive ref, maintaining its reactivity.

Why use toRef?

toRef is suitable when you only need to access or modify a certain property in the object without converting the entire object.

The role of readonly and shallowReactive.

1. The role of readonly readonly is used to create a read-only reactive object, making all properties of the object read-only and unmodifiable. This is useful when you do not want certain data to be modified, such as when passing data to child components to ensure that the data is not accidentally changed.

2. The role of shallowReactive shallowReactive is used to create a shallow reactive object. It is similar to reactive but only makes the top-level properties of the object reactive, without recursively making the nested properties of the object reactive. This means that if the object contains nested sub-objects, the nested objects themselves will not become reactive, only the direct properties of the object will become reactive.

Difference between watchEffect and ordinary watch

watchEffect and watch are both used for managing side effects of reactive data, and they can both listen to and respond to changes in reactive data.

1. watchEffect

watchEffect is an API provided by Vue 3 that runs immediately and automatically tracks changes in reactive data. Its main feature is the ability to automatically collect dependencies and execute side effects. In other words, watchEffect does not need to explicitly specify the reactive data to be listened to, but automatically tracks all reactive data within it.

2. watch

watch allows you to manually specify the reactive data to be listened to. When the specified reactive data changes, watch executes the callback function. Unlike watchEffect, watch requires explicitly specifying the data to be listened to, and you can get the new and old values through the callback function.