Directorio de artículos de la serie
Preguntas básicas de respuesta corta de Vue.js
Directorio de artículos
prefacio
El ciclo de vida de Vue.js se refiere al ciclo de vida de una instancia de Vue;
el ciclo de vida de una instancia de Vue se refiere al proceso desde la creación hasta la operación y la destrucción de la instancia.
Al establecer una función de ciclo de vida, las funciones se pueden ejecutar en etapas específicas del ciclo de vida.
Las funciones del ciclo de vida también se denominan ganchos del ciclo de vida.
提示：以下是本篇文章正文内容，下面案例可供参考
1. Etapa de creación
Características: cada instancia solo se puede ejecutar una vez.
1.beforeCreate
beforeCreate es una función de enlace de ciclo de vida que se llama después de que se crea la instancia de Vue y antes de la configuración del observador de datos y del evento/evento del observador. En esta etapa, la observación de datos de la instancia aún no ha comenzado, por lo que si se requiere la observación de datos en esta etapa, $watch debe activarse manualmente.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function() {
this.$watch('message', function(newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal);
});
}
});
2.creado
created es una función de enlace de ciclo de vida que se llama inmediatamente después de que se crea la instancia de Vue. En esta etapa, la instancia ha completado el observador de datos, la configuración de eventos, etc., para que pueda operar con seguridad en el DOM. Por lo general, algunas operaciones de inicialización se realizan en esta etapa, como la obtención de datos, la configuración de la supervisión de eventos, etc.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function() {
console.log('Vue instance created');
}
});
3.antes del montaje
beforeMount es una función de enlace de ciclo de vida llamada antes de la fase de montaje. En esta etapa, la plantilla está compilada, pero el DOM virtual no se ha renderizado en el DOM real. Esta etapa se puede utilizar para realizar algunas operaciones directamente relacionadas con DOM, como modificar CSS, agregar detectores de eventos, etc. Cabe señalar que si se realiza la manipulación DOM en esta etapa, puede causar problemas de rendimiento. Por lo tanto, se recomienda usar las directivas y las propiedades calculadas proporcionadas por Vue.js para manejar el enlace de datos y la manipulación de DOM.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeMount: function() {
// 在挂载前修改样式、添加事件监听器等操作
}
});
4.montado
montada es una función de enlace de ciclo de vida que se llama después de que finaliza la fase de montaje. En esta etapa, la instancia se montó con éxito en el DOM, y el acceso a la API del DOM y otras operaciones asincrónicas se pueden realizar con confianza. Por lo general, algunas operaciones que dependen del DOM o de las solicitudes de red se realizan en esta etapa.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted: function() {
// 在挂载后修改样式、访问 DOM、发送网络请求等操作
$.get('https://api.example.com/data').then(function(data) {
Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
}
});
2. Etapa de operación
Características: llamada bajo demanda.
1.beforeUpdate
beforeUpdate es una función de enlace del ciclo de vida que se activa cuando se actualizan los datos. En esta etapa, los datos de la instancia permanecen sin cambios, por lo que la manipulación de datos y las actualizaciones de las propiedades calculadas se pueden realizar con confianza. Si se realizan operaciones innecesarias en esta etapa, puede causar problemas de rendimiento. Se recomienda utilizar propiedades calculadas para gestionar las actualizaciones de datos.
new Vue({
el: '#app',
data: {
_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
},
computed: {
message: function() {
return this._message; } // 将 _message 通过计算属性暴露给模板使用
},
beforeUpdate: function() {
} // 在数据更新前执行的操作，例如更新计算属性等
});
2.actualizado
actualizado es una función de enlace de ciclo de vida que se activa después de que se actualizan los datos. En esta etapa, los datos de la instancia se han actualizado y el acceso a la API DOM y otras operaciones asincrónicas se pueden realizar con confianza. Por lo general, algunas operaciones que dependen del DOM o de las solicitudes de red se realizan en esta etapa.
new Vue({
el: '#app',
data: {
_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
},
computed: {
message: function() {
return this._message; } // 将 _message 通过计算属性暴露给模板使用
},
methods: {
fetchData: function() {
$.get('https://api.example.com/data').then(function(data) {
Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
}
},
updated: function() {
} // 在数据更新后执行的操作，例如调用方法等
});
3. Etapa de destrucción
Características: cada instancia solo se puede ejecutar una vez.
1.antes de destruir
beforeDestroy es una función de enlace de ciclo de vida llamada antes de que se destruya el componente. En esta etapa, la instancia aún puede acceder al DOM y realizar operaciones de la API del DOM, pero se marcó para descargarse pronto. Si necesita realizar alguna limpieza antes de que se destruya el componente, puede hacerlo en esta etapa.
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
beforeUnmount: function() {
} // 在组件卸载前执行的操作，例如移除事件监听器等
});
2.destruido
destroy es una función de enlace de ciclo de vida que se llama después de que se destruye el componente. En esta etapa, la instancia se eliminó del DOM y todas las operaciones relacionadas con el DOM ya no son válidas. Por lo general, en esta etapa, se realizan algunas operaciones, como la liberación de recursos y el borrado del temporizador.
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
destroyed: function() {
} // 在组件销毁后执行的操作，例如关闭弹窗、清除定时器等
});
Resumir
Vue.js es un marco progresivo para crear interfaces de usuario. Su biblioteca central solo se enfoca en la capa de vista y es fácil de integrar con otras bibliotecas o proyectos existentes. En Vue.js, podemos monitorear y manipular los cambios en los elementos DOM mediante la definición de funciones de enlace del ciclo de vida, para realizar el enlace bidireccional de datos, la creación de componentes y otras funciones.