Vue.js is a popular JavaScript framework for building single-page applications. Vue.js provides many features such as components, directives, computed properties, filters, etc., making it easier for developers to build dynamic and interactive user interfaces. Among them, the template syntax of Vue.js is a very important aspect of the Vue.js framework, because it allows developers to write HTML code in templates in a declarative manner and use the functions of Vue.js in it.
In Vue.js, the template syntax has many lifecycle hook functions that allow developers to execute custom code at different stages of template rendering. These life cycle hook functions include beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy and destroyed.
beforeCreate and created
beforeCreate and created are two life cycle hook functions in the Vue.js instance creation process. In the beforeCreate hook function, the Vue.js instance has not yet been created, so no properties or methods of the instance can be accessed at this stage. In the created hook function, the Vue.js instance has been created, but the template has not been mounted on the DOM. At this stage, the developer can access the properties and methods of the instance, but cannot access the DOM elements of the component.
Here is an example using the beforeCreate and created lifecycle hook functions:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, world!"
};
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
console.log(this.message); // 可以访问到实例的属性
}
};
</script>
beforeMount and mounted
beforeMount and mounted are two life cycle hook functions in the process of Vue.js instance mounting. In the beforeMount hook function, the Vue.js instance has been created and the template has been compiled into a rendering function, but the rendering function has not been called yet. At this stage, the developer has access to the component's virtual DOM elements. In the mounted hook function, the Vue.js instance has been mounted on the DOM, and the virtual DOM of the component has been rendered into a real DOM element. At this stage, developers can access the component's DOM elements and perform further operations.
Here is an example using the beforeMount and mounted lifecycle hook functions:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, world!"
};
},
beforeMount() {
console.log("beforeMount");
console.log(this.$el.querySelector("p")); // 可以访问到组件的虚拟 DOM 元素
},
mounted() {
console.log("mounted");
console.log(this.$el.querySelector("p")); // 可以访问到组件的 DOM 元素，并进行进一步的操作
}
};
</script>
beforeUpdate and updated
beforeUpdate and updated are two life cycle hook functions in the Vue.js instance update process. In the beforeUpdate hook function, when the component's data changes, Vue.js has detected the data change, but rendering has not yet occurred. At this stage, developers can perform operations such as asynchronous operations or preventing data from being updated before it is updated. In the updated hook function, the component's virtual DOM has been re-rendered and synchronized with the new data. At this stage, developers can perform some operations after the component is updated, such as performing data validation or handling UI updates.
Here is an example using the beforeUpdate and updated lifecycle hook functions:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, world!"
};
},
beforeUpdate() {
console.log("beforeUpdate");
console.log(this.message); // 可以访问到旧的数据
},
updated() {
console.log("updated");
console.log(this.message); // 可以访问到新的数据，并进行进一步的操作
}
};
</script>
beforeDestroy and destroyed
beforeDestroy and destroyed are two life cycle hook functions in the destruction process of Vue.js instances. In the beforeDestroy hook function, the Vue.js instance is about to be destroyed, but the rendering has not yet been removed. At this stage, developers can perform operations such as canceling asynchronous operations or cleaning up event listeners. In the destroyed hook function, the Vue.js instance has been destroyed, and the component's DOM element has also been removed. At this stage, developers can perform some operations after the component is destroyed, such as cleaning up memory or performing data persistence operations.