敲出来的真理-vue之生命周期事件含(单页面 组件 )

最新推荐文章于 2023-04-16 14:45:00 发布
最新推荐文章于 2023-04-16 14:45:00 发布
阅读量164 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunwork888/article/details/121033855
版权

虽然官网给的名字叫"生命周期钩子"，但是我还是更加熟悉"生命周期事件"，不然总感觉是在学习新概念。

Vue 实例生命周期

包含内容

main.js 初始化 > App.vue > 路由 第一页面 diy.vue > diy.vue 组件 MyHelloWorld.vue 

代码如下 

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'   //引用 element-ui 样式

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  // render: h => h(App)
  render: function (createElement) {
    console.group("main.js render 渲染");

    console.log("this.$el:" + JSON.stringify(this.$el));

    console.log("this.$data:" + JSON.stringify(this.$data));

    console.groupEnd();

    return createElement(App);
  }
}).$mount('#app')

APP.vue 

<template>
  <div id="app">
    <h1>
      <div id="nav">
        菜单:
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>|
        <router-link to="/elm/layout">Layout</router-link>|
        <router-link to="/elm/Container">Container</router-link>|
        <router-link to="/Login">Login</router-link>|
        <router-link to="/test/diy">diy</router-link>|
      </div>
    </h1>
    <router-view />
  </div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";

export default defineComponent({
  setup() {},
  beforeCreate: function () {
    console.group("App.vue beforeCreate 创建前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  created: function () {
    console.group("App.vue created 创建结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeMount: function () {
    console.group("App.vue beforeMount 挂载前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  mounted: function () {
    console.group("App.vue mounted 挂载结束");

    console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

    console.log("this.$data:" + JSON.stringify(this.$data));

    console.log("this.msg:" + JSON.stringify(this.msg));

    console.groupEnd();
  },
  beforeUpdate: function () {
    console.group("App.vue beforeUpdate 数据更新前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  updated: function () {
    console.group("App.vue updated 数据更新结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeDestroy: function () {
    console.group("App.vue beforeDestroy 销毁前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  destroyed: function () {
    console.group("App.vue destroyed 销毁结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 diy.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <hr />
    <MyHelloWorld msg="模块 MHelloWorld.vue  Hello World！"></MyHelloWorld>
  </div>
</template>
<script>
import MyHelloWorld from "../../components/MyHelloWorld.vue";

export default {
  data() {
    return {
      msg: "页面 diy.vue Hello World！",
    };
  },

  beforeCreate: function () {
    console.group("diy.vue beforeCreate 创建前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  created: function () {
    console.group("diy.vue created 创建结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeMount: function () {
    console.group("diy.vue beforeMount 挂载前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  mounted: function () {
    console.group("diy.vue mounted 挂载结束");

    console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

    console.log("this.$data:" + JSON.stringify(this.$data));

    console.log("this.msg:" + JSON.stringify(this.msg));

    console.groupEnd();
  },
  beforeUpdate: function () {
    console.group("diy.vue beforeUpdate 数据更新前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  updated: function () {
    console.group("diy.vue updated 数据更新结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeDestroy: function () {
    console.group("diy.vue beforeDestroy 销毁前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  destroyed: function () {
    console.group("diy.vue destroyed 销毁结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  components: {
    MyHelloWorld,
  },
};
</script>

 MyHelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "MyHelloWorld",
  props: {
    msg: String,
  },
  beforeCreate: function () {
    console.group("MyHelloWorld.vue模块 beforeCreate 创建前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  created: function () {
    console.group("MyHelloWorld.vue模块 created 创建结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeMount: function () {
    console.group("MyHelloWorld.vue模块 beforeMount 挂载前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  mounted: function () {
    console.group("MyHelloWorld.vue模块 mounted 挂载结束");

    console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

    console.log("this.$data:" + JSON.stringify(this.$data));

    console.log("this.msg:" + JSON.stringify(this.msg));

    console.groupEnd();
  },
  beforeUpdate: function () {
    console.group("MyHelloWorld.vue模块 beforeUpdate 数据更新前");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  updated: function () {
    console.group("MyHelloWorld.vue模块 updated 数据更新结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  beforeDestroy: function () {
    console.group("MyHelloWorld.vue模块 beforeDestroy 销毁前");

    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
  destroyed: function () {
    console.group("MyHelloWorld.vue模块 destroyed 销毁结束");
    try {
      console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));

      console.log("this.$data:" + JSON.stringify(this.$data));

      console.log("this.msg:" + JSON.stringify(this.msg));
    } catch (error) {}
    console.groupEnd();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 

煮吧姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue入门(一)之常用事件、生命周期
fajing_feiyue的博客
11-08 337
前言 前端web开发最流行的工具库之一，但之前有过学习之后。一直没有怎么使用，很多东西已经忘记，这里对之前学过一点内容做一下回顾，也可当做入门小案例。 案例 一、入门小demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
vue生命周期详解
huangdj321的博客
06-21 471
从 vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期生命周期钩子：就是生命周期事件的别名，生命周期钩子 = 生命周期函数 = 生命周期事件1、创建期间的生命周期函数 beforeMount：此时已经完成了模板编译，但是还没有挂载到页面中 mounted：此时已经将编译好的模板，挂载到了页面指定的容器中显示 2、运行期间的生命周期函数...
vue.js 生命周期-事件
ardee0314的博客
09-07 150
1 beforeCreate(){ 2 console.log('创建之前,beforeCreate....'); 3 }, 4 created(){ 5 console.log('创建完成了，created...'); 6...
Vue生命周期解析及相应事件
qq_42504266的博客
12-12 442
生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 而在这个初始化过程中，Vue又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； 首先我们来结合Vue官方提供的图看一下Vue生命周期到底发生了些啥 ...
vue生命周期函数面试题
weixin_45644355的博客
07-24 2986
1.什么是 vue 生命周期？有什么作用？ 答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。 2.第一次页面加载会触发哪几个钩子？ 答：beforeCreate，
Vue v-for computed 生命周期和模板引用 语法示例演示代码
最新发布
07-17
Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 ...
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
Vue父组件监听子组件生命周期
10-14
总结来说，Vue 父组件监听子组件生命周期是通过自定义事件和`@hook`修饰符实现的，这为开发者提供了更精细的控制，以确保组件之间的交互按预期进行。了解并熟练掌握这些机制，能够帮助开发者构建更复杂、响应更快的...
前端html利用http-vue-loader以组件方式引入vue文件
06-15
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 ...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue实例的生命周期详解
qq_33712668的博客
05-20 2971
Vue实例的生命周期 简介 此篇文章说的是最简单的单个VUE组件的生命周期。 官网中的长图诠释了Vue实例从创建，运行到销毁的整个过程。从vue实例的创建，运行，销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期 为了便于理解，再代码中创建vue实例，并在每个钩子函数中console出每个生命周期的el,data和message。此段代码可以直接复制。 <!DOCTYPE html...
vue的生命周期
weixin_66951051的博客
03-29 665
vue的生命周期
Vue声明周期与其事件
qq_40781291的博客
03-05 186
声明周期分析 new Vue()新建Vue的实例，调用Vue.prototype._init函数 beforeCreate之前：初始化事件、生命周期和渲染函数，并调用callHook(vm,'beforeCreate')调用钩子函数。 created之前：初始化注入，初始化数据，初始化校验，调用callHook(vm,'create') Vue.prototype._init = functi...
vue 生命周期
yanhappiness
12-23 453
beforeCreate(){ alert("组件实例化之前执行的函数"); }, created(){ alert("组件实例化完毕，但页面未显示"); }, beforeMount(){ alert("组件挂载前，页面仍未展示，但是虚拟Dom已经配置"); }, mounted(){ alert("组件挂载，此方法执行后，页面显示");
Vue生命周期
surprise_bao的博客
04-26 256
Vue生命周期 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类： 1.创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created：实例已经在内存中创建OK，此时 data 和 ...
vue学习笔记--vue实例的生命周期钩子函数、事件
watson_pillow的博客
11-10 127
第二天
VUE（二）生命周期
qq_39669807的博客
04-21 131
VUE生命周期 Vue生命周期分为 创建、挂载、更新、销毁四个阶段： beforeCreate（创建前）：实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据。用于初始化非响应式变量和显示loading created（创建后）：可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不...
Vue的生命周期有哪些？
tyxjolin的专栏
04-16 1098
Vue.js 的生命周期是一个非常重要的概念，在开发 Vue.js 应用时，我们需要了解组件的生命周期，才能更好地掌握 Vue.js 的使用方式。beforeDestroy：在组件被销毁之前被调用，此时组件还未被销毁，可以进行一些资源的释放操作。destroyed：在组件被销毁之后被调用，此时组件已经被销毁，所有的资源都应该被释放。在这个阶段中，我们可以进行一些资源的释放操作，如取消订阅事件、解除绑定等。
Vue实例与生命周期深度解析：结合vue-cli实战
总结，Vue实例、生命周期和Vue CLI是Vue.js开发中的基础概念。理解它们能帮助开发者更好地构建和管理Vue应用，提高开发效率和代码质量。Vue CLI提供了现代化的开发环境，使得Vue的开发更加便捷高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值