<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期钩子</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<com @click="onClick"></com>
</div>
<script>
Vue.component("com", {
template: "<div></div>",
beforeCreate() {
this.$emit("click", "emit click");
}
});
// vue实例运行过程中,某一个特定流程点需要执行的回调函数
var app = new Vue({
el: "#app",
data: {
message: "hello world"
},
methods: {
onClick(e) {
console.log(e);
}
},
beforeCreate() {
/**
* 此时还没有data,组件也没挂载完成,不可以使用。
* 此阶段router已经存在,可以处理路由传参信息
* 此阶事件已经初始化完成,可以发送事件 $emit $on
*/
console.log("beforeCreate");
},
created() {
/**
* 源码:
* initLifecycle(vm)
* initEvents(vm) // 初始化事件
* initRender(vm)
* callHook(vm, 'beforeCreate')
* initInjections(vm) // resolve injections before data/props
* initState(vm) // 初始化数据
* initProvide(vm) // resolve provide after data/props
* callHook(vm, 'created')
* 此阶段数据已经加载完成,可以在此阶段发起网络请求
*/
console.log("created");
},
beforeMount() {
/**
* 此阶段render函数首次调用开始把VNode渲染为真实的DOM
*/
console.log("beforeMount", this.$el);
},
mounted() {
/**
* 此阶段组件挂载完成,可以操作组件和DOM
*/
console.log("mounted", this.$el);
},
beforeDestroy() {
/**
* Vue实例销毁前回调
*/
console.log("beforeDestory");
},
destroyed() {
/**
* Vue实例已销毁
*/
console.log("destoryed");
},
beforeUpdate() {
/**
* 数据更新前回调,此阶段改变data,不会重新渲染,不会重复触发beforeUpdate
*/
console.log("beforeUpdate");
},
updated() {
/**
* 数据更新完成回调,此阶段改变data,会造成死循环
*/
console.log("updated");
}
});
// app.$mount('#app')
</script>
</body>
</html>
Vue生命周期钩子
最新推荐文章于 2022-11-21 16:39:34 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)