当前位置：首页 > article >正文

【VUE2】第二期——生命周期及工程化

article 2026/3/16 11:58:09

1 生命周期

1.1 介绍

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

1.2 钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

示例：

<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>
</body>

2 可视化图表库

官网：

Apache ECharts

饼图渲染:

(1) 在创建阶段后（created）初始化一个饼图 echarts.init(dom)

(2) 将更新饼图数据代码（echarts.setOption({ ... })）封装，每当更新列表时调用一次，根据数据实时更新饼图

(3) 在挂载阶段后（mouted）调用函数，更新一次饼图数据

<body><div id="app"><div class="echarts-box" id="main"></div></div><script>const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},created () {// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {//   params: {//     creator: '小黑'//   }// })// this.list = res.data.datathis.getList()},mounted () {//初始化this.myChart = echarts.init(document.querySelector('#main'))//第一次渲染（无数据渲染）this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},methods: {async getList () {//更新数据const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '小黑'}})this.list = res.data.data// 更新图表（后续渲染）this.myChart.setOption({// 数据项series: [{data: this.list.map(item => ({ value: item.price, name: item.name}))}]})},}})</script>
</body>

⭐️注意（与以前不同的点）：

1.axios可以简写写成axios.请求方式("请求地址", 请求数据对象)

get请求方法需要在请求数据对象里面再挂载一个params对象，然后在里面写参数，而post直接在请求数据对象里面写参数就行了

2.typeof后可以不加小括号（typeof 是一个一元运算符，用于返回一个表示数据类型的字符串）但是还是推荐加括号，这样可读性高

3 脚手架Vue CLI

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

3.1 使用步骤

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g

查看vue/cli版本： vue --version

创建项目架子：vue create project-name(项目名不能使用中文)

启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

记录：使用npm源或淘宝镜像且用yarn命令报错

解决：切换腾讯镜像，并且使用npm命令下载

3.2 项目目录介绍

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可

main.js 入口文件
App.vue App根组件
index.html 模板文件

3.3 main.js入口文件代码介绍

//导入Vue模块
import Vue from 'vue'
//导入App根组件
import App from './App.vue'//设置控制台是否打印当前环境：生产环境or开发环境
Vue.config.productionTip = false//vue自动创建的实例化代码（简写）
new Vue({render: h => h(App),
}).$mount('#app')//完整写法
new Vue({//el指定Vue所管理的容器，与上述.$mount('#app')效果一样el:"#app",//render基于App.vue创建结构渲染index.htmlrender: (createElement) => {return createElement(App)}
})

4 组件化开发

4.1 组件

语法高亮插件：

构成：

template：结构（有且只能一个根元素）

script: js逻辑

style：样式 (可支持less，需要装包)

让组件支持less：

（1） style标签，lang="less" 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

4.2 普通组件注册

4.2.1 局部注册

特点：只能在注册的组件内使用

步骤：

1. 创建.vue文件（三个组成部分），可输入vue快速创建

组件名规范：大驼峰命名法，如 HmHeader

2. 在使用的组件内先导入再注册，最后使用

注册语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'export default {  // 局部注册components: {'组件名': 组件对象,}
}

例：

// 导入需要注册的组件
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {HmHeader:HmHeaer,//或//HmHeader}
}

使用方式：

当成html标签使用即可 <组件名></组件名>

4.2.2 全局注册

特点：全局注册的组件，在项目的任何组件中都能使用

步骤：

1. 创建.vue组件（三个组成部分）

与上述一样，此处不再赘述

2. 在main.js中进行全局注册

Vue.component('组件名', 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

【VUE2】第二期——生命周期及工程化

目录 1 生命周期 1.1 介绍 1.2 钩子 2 可视化图表库 3 脚手架Vue CLI 3.1 使用步骤 3.2 项目目录介绍 3.3 main.js入口文件代码介绍 4 组件化开发 4.1 组件 4.2 普通组件注册 4.2.1 局部注册 4.2.2 全局注册 1 生命周期 1.1 介绍 Vue生命周期：就是…...

编程日记 2026/3/16 11:58:09

贪心算法三

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是贪心算法，并且掌握贪心算法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! >…...

编程日记 2026/3/16 11:58:08

猫耳大型活动提效——组件低代码化

1. 引言猫耳前端在开发活动的过程中，经历过传统的 pro code 阶段，即活动页面完全由前端开发编码实现，直到 2020 年接入公司内部的低代码活动平台，满足了大部分日常活动的需求，运营可自主配置活动并上线，释…...

编程日记 2026/3/16 11:14:58

机器学习 Day02,matplotlib库绘图

1.matplotlib图像结构容器层：画板，画布，坐标系辅助层：刻度，标题，网格，图例等图像层：折线图（主讲），饼图，直方图，柱状图等…...

编程日记 2026/3/16 11:58:12

MySQL中有哪几种锁？

大家好，我是锋哥。今天分享关于【MySQL中有哪几种锁？】面试题。希望对大家有帮助； MySQL中有哪几种锁？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 MySQL 中，锁是用于确保数据的一致性和并发控制的机…...

编程日记 2026/3/8 18:44:51

Unity单例模式更新金币数据

单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取该实例。在游戏开发中，单例模式非常适合用于管理全局唯一的数据，比如玩家的金币数量。通过使用单例…...

编程日记 2026/3/16 11:58:17

【javaEE】多线程（进阶）

1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

编程日记 2026/3/11 18:12:25

python从入门到精通（二十四）：python爬虫实现登录功能

这里写目录标题 requests实现登录功能selenium实现登录功能 requests实现登录功能使用 requests 库结合会话（Session）来尝试登录。不过豆瓣有反爬虫机制，这种方式可能会受到验证码等因素的限制 import requests import re# 豆瓣登录页面 l…...

编程日记 2026/2/21 5:31:26

Flask Jinja语法总结篇

目录 1️⃣ 变量（Variables） 2️⃣ 条件语句（if 语句） 3️⃣ 循环（for 语句） 4️⃣ 过滤器（Filters） 5️⃣ 宏（Macros，类似于函数） 6️⃣ 模板继承（Template Inheritance） 7️⃣ 包含模板（Include） 8️⃣ Flask 结合 Jinja 总结 Jinja 是 Flask 默认使…...

编程日记 2026/2/20 3:27:19

Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)

目录一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下) 二、Element-Plus常用组件使用。 （1）el-input。(input输入框) <1>正常状态的el-input。 <2>el-input的disable状态。 <3…...

编程日记 2026/3/16 16:21:13

C++ 链表List使用与实现：拷贝交换与高效迭代器细致讲解

目录 list的使用： 构造与赋值元素访问修改操作容量查询链表特有操作拼接（Splice） C11 新增方法注意： stl_list的模拟实现： 一、链表节点设计的艺术 1.1 结构体 vs 类的选择二、迭代器实现的精髓 2…...

编程日记 2026/3/16 12:01:33

安当TDE透明加密技术：为Manus大模型构建用户会话数据保护的“安全金库”

摘要在人工智能技术深度落地的今天，大模型开发者面临的核心挑战已从算法优化转向数据安全。作为垂直领域大模型的代表，Manus凭借其强大的语义理解与个性化交互能力，在金融、医疗、教育等行业获得广泛应用。然而，其海量的用户会话…...

编程日记 2026/2/26 1:27:17

知乎后台管理系统：数据库系统原理实验1——数据库基础概念

实验背景通过练习绘制语义网络，加深对于基本概念之间关系的理解和掌握。掌握在VISIO中绘制能准确表达基本概念之间关系的语义网络的技能。了解并比较数据模型的Chen’s表示法和UML表示法。理解关系模型设计中的完整性约束的重要性。掌握在Linux操作系统下远程访问…...

编程日记 2026/3/16 11:58:22

docker compose 以redis为例

常见docker compose 命令》》注意这个是旧版本的，新版本 docker 与compose 之间没有 - 新版本的 docker compose 把 version 取消了 ，redis 默认是没有配置文件的 ，nginx，mysql 默认是有的 services:redis:image: redis:lat…...

编程日记 2026/3/15 13:47:59

ES C++客户端安装及使用

1. ES 介绍 Elasticsearch ， 简称 ES ，它是个开源分布式搜索引擎，它的特点有：分布式，零配置，自动发现，索引自动分片，索引副本机制， restful 风格接口，多…...

编程日记 2026/3/11 10:34:22

【软件工程】一篇入门UML建模图（状态图、活动图、构件图、部署图）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀软件开发必练内功_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1. 前…...

编程日记 2026/3/16 11:58:10

应急响应--流量分析

（一）Cobalt Strike流量特征分析 1.HTTP特征源码特征： 在流量中，通过http协议的url路径，在checksum8解密算法计算后，32位的后门得到的结果是92，64位的后门得到的结果是93，该特征符…...

编程日记 2026/3/12 5:11:50

name ‘bare_metal_version‘ is not mamba_ssm安装

目录解决方法： 测试ok： mamba_ssm安装报错，windows 安装时， pip install mamba_ssm name bare_metal_version is not defined mamba代码地址： https://github.com/state-spaces/mamba/tree/main 解决方法&…...

编程日记 2026/2/21 16:29:09

自然语言处理：高斯混合模型

介绍大家好，博主又来给大家分享知识了，今天给大家分享的内容是自然语言处理中的高斯混合模型。在自然语言处理这个充满挑战与机遇的领域，我们常常面临海量且复杂的文本数据。如何从这些数据中挖掘出有价值的信息，对文本进行有…...

编程日记 2026/3/14 0:49:08

【C++指南】一文总结C++类和对象【中】

🌟 各位看官好，我是egoist2023！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 今天来学习C类和对象的语法知识。注意：在本章节中，小编会以Date类举例 👍 如果觉得…...

编程日记 2026/3/12 6:15:31

再聊 Flutter Riverpod ，注解模式下的 Riverpod 有什么特别之处，还有发展方向

三年前我们通过《Flutter Riverpod 全面深入解析》深入理解了 riverpod 的内部实现，而时隔三年之后，如今Riverpod 的主流模式已经是注解，那今天就让我们来聊聊 riverpod 的注解有什么特殊之处。前言在此之前，我们需要先回忆…...

编程日记 2026/3/13 14:22:19

Go语言集成DeepSeek API和GoFly框架文本编辑器实现流式输出和对话（GoFly快速开发框架）

说明本文是GoFly快速开发框架集成Go语言调用 DeepSeek API 插件，实现流式输出和对话功能。为了方便实现更多业务功能我们在Go服务端调用AI即DeepSeek接口，处理好业务后再用Gin框架实现流失流式输出到前端，前端使用fetch请求接收到流式的mar…...

编程日记 2026/3/9 19:46:11

docker不停机部署

背景最近做大疆项目时，后台更新部署时，机场和无人机就会掉线。设备自动重连注册时间比较长，应用长时间不可用。所以需要灰色发布服务。docker-compose的swarm模式可解决此问题。服务构建脚本Dockerfile # 使用官方Java基础镜像&#xff…...

编程日记 2026/3/16 19:47:48

ZLG嵌入式笔记 | ZLG核心板散热设计指引

在嵌入式系统设计中，散热是影响处理器性能与稳定性的关键问题。本文聚焦于高端嵌入式处理器的散热设计，探讨核心板的热设计与系统级热设计方法，以及导热材料和布局的建议，为解决高温问题提供参考。用高端嵌入式处理器设计系统&am…...

编程日记 2026/3/8 3:28:26

[Java]使用java进行JDBC编程

首先要从中央仓库下载api(类似驱动程序)，为了链接java和mysql 下载jar包，需要注意的是jar包的版本要和mysql保持一致下面是新建文件夹lib，把jar包放进去，并添加为库 sql固定的情况下运行 import com.mysql.cj.jdbc.MysqlDataSo…...

编程日记 2026/3/12 19:28:05

MySQL进阶-关联查询优化

采用左外连接下面开始 EXPLAIN 分析 EXPLAIN SELECT SQL_NO_CACHE * FROM type LEFT JOIN book ON type.card book.card; 结论：type 有All ,代表着全表扫描，效率较差添加索引优化 ALTER TABLE book ADD INDEX Y ( card); #【被驱动表】&#xff0…...

编程日记 2026/3/16 11:58:19