Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
Vue's reactivity system is built around the concept of reactive dependencies. Whenever a piece of data is used in a certain context, that context becomes dependent on the data. If the data changes, Vue knows which parts of the application need to be updated.
Vue 3's reactivity system is built using JavaScript's Proxy API, which allows Vue to efficiently observe changes to data and update the application when necessary.
Here's a more in-depth look at the principles behind Vue's reactivity:
Reactive data sources: In Vue 3, reactive data sources can be created using the ref and reactive functions. A ref is used for primitive values (numbers, strings, booleans), while reactive is used for objects and arrays.
const count = ref(0);
const user = reactive({ name: 'John', age: 25 });
A ref becomes reactive because it is wrapped in an object with a value property. This allows Vue to observe changes to the value using a Proxy.
Dependencies tracking: Whenever a reactive value is read (for instance, in the template or a computed property), Vue internally tracks this as a dependency of the current "effect". An effect is essentially a function that reacts to reactive data changes.
Dependency triggering: When a reactive value is modified, Vue knows which effects are dependent on this value and re-runs them. For instance, if an effect corresponds to the rendering of a component, Vue will re-render the component.
Computed properties: Computed properties in Vue are basically cached effects. They only re-run when their dependencies change. This makes computed properties efficient when working with large arrays or objects, as they don't recompute unless necessary.
const doubled = computed(() => count.value * 2);
Watchers: In Vue 3, the watch and watchEffect functions are used to run side-effects in response to reactive data changes. A watchEffect automatically tracks dependencies the first time it runs, while watch requires you to specify what sources to track.
watchEffect(() => console.log(count.value)); watch(count, (newValue, oldValue) => console.log(newValue, oldValue));
Async behavior: Vue's reactivity system works seamlessly with async operations. You can return a Promise in a watcher or a computed property, and Vue will handle the pending state for you.
In essence, Vue's reactivity system automatically tracks dependencies between reactive data and effects (which include component rendering, computed properties, and watchers), and knows exactly when to trigger these effects when the data changes.
Reactive Data and Its Internals:
Reactive data in Vue 3.0 refers to data that triggers reactivity.
Internally, Vue uses a proxy-based system to achieve reactivity.
Example code:
import { reactive } from 'vue';
const userData = reactive({
name: 'John Doe',
age: 25,
});
Vue 3.0 Proxy-Based Reactivity:
Vue 3.0 utilizes JavaScript Proxies to track and react to changes in reactive data.
Proxies intercept operations on the object, enabling Vue to track dependencies.
Example code:
const reactiveData = reactive({
property: 'value',
});
reactiveData.property = 'new value'; // Triggers reactivity
Reactivity vs Vue 2.0:
Vue 3.0's reactivity system is more efficient and uses proxies, providing better performance compared to Vue 2.0's Object.defineProperty-based approach.
Proxies allow for finer-grained control over reactivity and improve development experience.
Example code:
// Vue 2.0
data() {
return {
property: 'value',
};
}
// Vue 3.0
import { reactive } from 'vue';
const reactiveData = reactive({
property: 'value',
});
Computed Properties in Vue 3.0 Reactivity:
Computed properties in Vue 3.0 leverage reactivity to update automatically when dependent data changes.
Computed properties are defined using the computed function.
Example code:
import { reactive, computed } from 'vue';
const userData = reactive({
firstName: 'John',
lastName: 'Doe',
});
const fullName = computed(() => {
return `${userData.firstName} ${userData.lastName}`;
});
Vue 3.0 ref and Reactive Functions:
The ref and reactive functions in Vue 3.0 are used to create reactive objects.
ref is used for creating a reactive reference to a single value.
Example code:
import { ref, reactive } from 'vue';
const count = ref(0);
const user = reactive({
name: 'John Doe',
age: 25,
});
Dependency Tracking in Vue 3.0 Reactivity:
Vue 3.0 automatically tracks dependencies during the execution of reactive functions.
When a reactive dependency changes, the associated reactive function is re-executed.
Example code:
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(`Count is: ${count.value}`);
});
Vue 3.0 Reactivity and the Composition API:
The Composition API in Vue 3.0 is designed around reactivity.
Functions like reactive, ref, computed, and watch are essential in the Composition API.
Example code:
import { reactive, computed } from 'vue';
const userData = reactive({
firstName: 'John',
lastName: 'Doe',
});
const fullName = computed(() => {
return `${userData.firstName} ${userData.lastName}`;
});
Asynchronous Updates in Vue 3.0 Reactivity:
Vue 3.0 supports asynchronous updates through the nextTick function.
Asynchronous updates ensure that the DOM is updated after the next event loop cycle.
Example code:
import { ref, nextTick } from 'vue';
const count = ref(0);
count.value++;
nextTick(() => {
console.log(`Updated count is: ${count.value}`);
});
Vue 3.0 Reactivity for Reactive Programming:
Vue 3.0's reactivity system is designed for building reactive applications.
Reactive programming allows for declarative data flow and automatic UI updates.
Example code:
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});