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

2024-02-21 17:58
文章标签 javascript 组件 vue 页面 事件 frontend 生命周期 出来 真理

本文主要是介绍敲出来的真理-vue之生命周期事件含(单页面 组件 )，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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 = falsenew 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>

 

这篇关于敲出来的真理-vue之生命周期事件含(单页面 组件 )的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/732605。

相关文章

Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
Maven中生命周期深度解析与实战指南

Maven中生命周期深度解析与实战指南

《Maven中生命周期深度解析与实战指南》这篇文章主要为大家详细介绍了Maven生命周期实战指南,包含核心概念、阶段详解、SpringBoot特化场景及企业级实践建议,希望对大家有一定的帮助... 目录一、Maven 生命周期哲学二、default生命周期核心阶段详解（高频使用）三、clean生命周期核心阶
阅读更多...
基于Python Playwright进行前端性能测试的脚本实现

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指
阅读更多...
Olingo分析和实践之OData框架核心组件初始化(关键步骤)

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步：OData实例创建1.1 OData.newInstance() 详细分析1.1.1
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2