Vue生命周期钩子

作者: wdapp | 来源:发表于2020-02-07 17:32 被阅读0次

2.vue生命周期钩子
Vue （2.x）生命周期
vue生命周期
vue 获取节点获取事件
详细的分析 Vue生命周期
Vue生命周期
Vue生命周期中钩子函数整理
微信小程序的初体验——对比Vue
深入浅出Vue生命周期钩子函数
vue3较vue2的特别之处 - 生命周期

<!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>