Vue生命周期钩子
2020-02-07 本文已影响0人
wdapp
<!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>
