Vue生命周期钩子

最新推荐文章于 2022-11-21 16:39:34 发布

wdapp

最新推荐文章于 2022-11-21 16:39:34 发布

阅读量110

点赞数

分类专栏： Vue vue.js

本文链接：https://blog.csdn.net/wanda000/article/details/104213051

版权

Vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue.js

5 篇文章 0 订阅

订阅专栏

本文详细探讨了Vue.js中组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等各个阶段，以及它们在实际应用中的使用场景和注意事项。通过实例解析，帮助开发者更好地掌握Vue组件的生命周期管理和状态控制。

摘要由CSDN通过智能技术生成

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

wdapp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期钩子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue生命周期钩子</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...
复制链接

扫一扫

专栏目录