【Vue生命周期的演变:从Vue 2到Vue 3的深度剖析】

Vue生命周期的演变:从Vue 2到Vue 3的深度剖析

1. 生命周期钩子的概念与意义

Vue框架通过生命周期钩子函数使开发者可以在组件不同阶段执行自定义逻辑。这些钩子函数是Vue组件生命周期中的关键切入点,对于控制组件行为至关重要。

2. Vue 2中的生命周期钩子

2.1 完整的生命周期钩子序列

Vue 2提供了一系列生命周期钩子,按执行顺序排列:

export default {// 创建阶段beforeCreate() {// 实例初始化之后,数据观测和事件配置之前},created() {// 实例创建完成,可访问data、methods等},// 挂载阶段beforeMount() {// 挂载开始之前调用},mounted() {// DOM挂载完成后调用},// 更新阶段beforeUpdate() {// 数据更新时调用,但视图尚未重新渲染},updated() {// 视图更新完毕后调用},// 销毁阶段beforeDestroy() {// 实例销毁前调用},destroyed() {// 实例销毁后调用},// 特殊钩子activated() {// keep-alive组件激活时调用},deactivated() {// keep-alive组件停用时调用},errorCaptured(err, vm, info) {// 捕获后代组件错误时调用}
}

2.2 各钩子函数的可访问性与用途

beforeCreate

可访问性

  • ❌ 无法访问组件实例data
  • ❌ 无法访问methods
  • ❌ 无法访问计算属性
  • ❌ 无法访问props
  • ❌ 响应式系统尚未初始化

实际用途

  1. 插件初始化:如Vue Router、Vuex等插件会在此阶段进行初始化
  2. 全局配置:设置一些应用级别的配置
  3. 性能追踪:启动性能监测计时器

虽然beforeCreate能做的事情很有限,但在特定场景下非常有价值,特别是对于需要在Vue实例初始化的最早期执行的逻辑。

created

可访问性

  • ✅ 可访问响应式数据(data)
  • ✅ 可访问methods方法
  • ✅ 可访问计算属性
  • ✅ 可访问props
  • ❌ 无法访问DOM(this.$el不可用)

实际用途

  1. 数据初始化:进行不依赖DOM的数据处理
  2. API请求:发起初始数据请求
  3. 注册事件监听:设置全局事件监听
  4. 初始化第三方库:初始化不依赖DOM的第三方库

created是进行数据初始化和API请求的理想位置,因为此时数据响应系统已经就绪,但DOM尚未渲染,可以避免不必要的DOM更新。

2.3 为什么需要beforeCreate和created?

虽然看起来beforeCreate似乎作用有限,但Vue设计这两个钩子有其深思熟虑的原因:

  1. 分离关注点

    • beforeCreate:专注于实例初始化前的逻辑
    • created:专注于数据初始化的逻辑
  2. 插件架构:许多Vue插件需要在不同阶段注入功能

    // Vue Router的实现部分依赖beforeCreate
    Vue.mixin({beforeCreate() {// 初始化路由}
    })
    
  3. 调试和性能监测:可以精确测量组件不同阶段的性能

3. Vue 3中的生命周期变化

3.1 命名调整与组合式API引入

Vue 3对生命周期钩子进行了两方面的变化:

  1. 命名调整:更准确地反映钩子的作用

    • beforeDestroyonBeforeUnmount
    • destroyedonUnmounted
  2. 组合式API形式:提供函数式的生命周期钩子

    • beforeCreate/created → 直接在setup函数中编写
    • beforeMountonBeforeMount
    • mountedonMounted
    • beforeUpdateonBeforeUpdate
    • updatedonUpdated
    • errorCapturedonErrorCaptured
    • 新增:onRenderTrackedonRenderTriggered(调试用)

3.2 setup与beforeCreate/created的关系

重要澄清setup函数并非简单地等同于beforeCreatecreated的合并。

实际上,setup函数执行时机是在组件实例创建之前,甚至早于beforeCreate。在使用选项式API的Vue 3组件中,如果同时定义了setupbeforeCreatecreated,执行顺序是:

  1. setup
  2. beforeCreate
  3. created
// Vue 3中这三者可以共存
export default {setup() {console.log('setup执行');return {};},beforeCreate() {console.log('beforeCreate执行');},created() {console.log('created执行');}
}
// 输出顺序:setup执行 → beforeCreate执行 → created执行

<script setup>是Vue 3.2引入的语法糖,它会将整个脚本块编译为组件的setup函数,但并非取代了beforeCreatecreated钩子的功能,而是提供了更便捷的编写方式。

3.3 组合式API中的生命周期钩子

<script setup>setup()函数中,可以使用以下方式引入生命周期钩子:

import { onMounted, onBeforeUnmount, onUpdated } from 'vue';// 在<script setup>中
onMounted(() => {console.log('组件挂载完成');
});onBeforeUnmount(() => {console.log('组件即将卸载');
});

add-modal.vue组件中,使用了onMounted钩子:

onMounted(async () => {// 初始化行业树initIndustryTree();// 获取字典数据const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...处理字典数据// 获取详情数据getDetail();
});

4. API请求应该放在哪个生命周期钩子中?

这是一个常被讨论的问题,需要根据具体情况决定。

4.1 created vs mounted的对比

在created中发送API请求

  • ✅ 更早开始数据加载,可能减少用户等待时间
  • ✅ 适用于服务端渲染(SSR)场景
  • ✅ 数据响应系统已就绪
  • ❌ 不能访问DOM元素
  • ❌ 可能无法正确处理需要可见性检查的组件

在mounted中发送API请求

  • ✅ 可以访问DOM元素
  • ✅ 可以基于元素可见性或尺寸决定是否请求
  • ✅ 可以更容易地与DOM相关的库集成
  • ❌ 比created晚执行,可能增加首次渲染等待时间

4.2 最佳实践与决策依据

选择在哪个钩子发送请求应考虑以下因素:

  1. DOM依赖:请求是否需要访问DOM元素?

    • 需要:使用mounted
    • 不需要:可以使用created
  2. 数据紧急性:数据是否需要尽快获取?

    • 首屏关键数据:优先使用created
    • 次要数据:可以使用mounted或延迟加载
  3. SSR考虑:应用是否使用服务端渲染?

    • 使用SSR:created中的代码在服务端和客户端都会执行
    • 仅客户端数据:考虑在mounted(仅客户端执行)
  4. 条件请求:请求是否基于组件状态或用户交互?

    • 基于交互:放在事件处理函数中
    • 基于组件可见性:使用mounted配合视口检测

4.3 示例案例分析

在我们的add-modal.vue示例中,API请求放在了onMounted中:

onMounted(async () => {// 初始化行业树initIndustryTree();// 获取字典数据和详情数据const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...getDetail();
});

此案例选择onMounted的原因可能是:

  1. 行业树初始化可能涉及DOM操作
  2. 组件完全挂载后再请求数据,确保UI已准备就绪
  3. 遵循团队一致的开发规范
  4. 非关键性数据,可以在DOM渲染后再加载

5. Vue 3组合式API的生命周期优势

5.1 逻辑复用与关注点分离

Vue 3组合式API允许生命周期钩子与相关逻辑一起组织,这是相比Vue 2的重大改进:

Vue 2中的逻辑分散

export default {data() {return { chartData: null }},created() {this.fetchChartData();},mounted() {this.initChart();},beforeDestroy() {this.disposeChart();},methods: {fetchChartData() { /* ... */ },initChart() { /* ... */ },disposeChart() { /* ... */ }}
}

Vue 3组合式API实现相同功能

function useChart() {const chartData = ref(null);const chartInstance = ref(null);// 数据获取逻辑function fetchChartData() { /* ... */ }// 图表初始化和销毁逻辑function initChart() { /* ... */ }function disposeChart() { /* ... */ }// 所有相关生命周期钩子集中在一起onMounted(() => {fetchChartData();initChart();});onBeforeUnmount(() => {disposeChart();});return { chartData, chartInstance, fetchChartData };
}// 在组件中使用
const { chartData, chartInstance } = useChart();

5.2 多次调用同一生命周期钩子

Vue 3允许多次调用同一个生命周期钩子,它们会按调用顺序执行:

onMounted(() => {console.log('第一个onMounted回调');
});onMounted(() => {console.log('第二个onMounted回调');
});// 输出顺序:第一个onMounted回调 → 第二个onMounted回调

这使得将相关逻辑封装在不同的组合函数中成为可能,每个组合函数可以管理自己的生命周期钩子。

5.3 明确的依赖关系

组合式API中的生命周期钩子可以捕获其作用域中的变量,使依赖关系更加明确:

function useFeature(props) {const localState = ref(0);// 此onMounted明确依赖props和localStateonMounted(() => {if (props.condition) {localState.value = 10;}});return { localState };
}

6. add-modal.vue示例中的生命周期应用

6.1 代码分析

add-modal.vue组件展示了Vue 3组合式API的优势:

// 组件级生命周期
onMounted(async () => {// 初始化行业树initIndustryTree();// 获取字典数据const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...处理字典数据// 获取详情数据getDetail();
});// 使用组合式API分离关注点
const {formRef,formData,// ...
} = useFormData({ defaultOptions, type: props.type });const {industryTreeData,// ...initIndustryTree,
} = useIndustryTree({ formData });const { getDetail } = useDetailData({// ...依赖项
});

这种组织方式体现了几个关键优势:

  1. 逻辑分组:相关功能封装在独立的组合函数中
  2. 关注点分离:表单处理、行业树、详情数据各自独立
  3. 依赖明确:每个组合函数明确声明其依赖

6.2 组合函数中的生命周期钩子

尽管在组件中只看到一个onMounted,但各个组合函数内部可能包含自己的生命周期钩子:

// 可能的useIndustryTree实现
function useIndustryTree({ formData }) {const industryTreeData = ref([]);// 组合函数内部的生命周期钩子onMounted(() => {// 一些初始化逻辑});// 对外暴露的初始化方法function initIndustryTree() {// ...初始化逻辑}return {industryTreeData,initIndustryTree,// ...};
}

这种模式使每个组合函数可以管理自己的内部状态和生命周期,同时向外提供清晰的接口。

7. 生命周期钩子的选择策略

7.1 选项式API中的选择策略

需求推荐钩子理由
插件初始化beforeCreate在实例初始化的最早期执行
数据初始化created可访问响应式数据,尚未渲染DOM
不依赖DOM的API请求created更早获取数据,减少等待
DOM操作mountedDOM已完全渲染
DOM依赖的API请求mounted可访问DOM元素和尺寸
清理事件监听beforeDestroy组件销毁前进行清理

7.2 组合式API中的选择策略

需求推荐方式理由
数据初始化setup函数或组合函数中在逻辑相关位置初始化
事件订阅组合函数 + onMounted集中管理相关逻辑
API请求组合函数 + onMounted可根据需要自定义请求时机
DOM操作onMountedDOM已渲染完成
清理工作onBeforeUnmount组件卸载前执行清理

7.3 实际项目中的最佳实践

  1. 按功能组织代码:使用组合函数将相关逻辑组织在一起

    // 示例:表单相关逻辑集中管理
    function useForm() {const form = ref({});onMounted(() => {// 表单初始化逻辑});return { form, /* 其他表单相关功能 */ };
    }
    
  2. 显式声明依赖:组合函数应明确其参数依赖

    // 明确声明依赖formData
    function useValidation({ formData }) {// 使用formData的验证逻辑
    }
    
  3. 合理使用生命周期钩子:在合适的钩子中执行对应逻辑

    // API请求策略
    function useData() {const data = ref(null);const loading = ref(false);// 立即加载的数据function fetchImportantData() {// 立即执行,不等待DOM}// DOM依赖的数据onMounted(() => {fetchDomDependentData();});return { data, loading, fetchImportantData };
    }
    

8. 深入理解生命周期

8.1 父子组件的生命周期执行顺序

Vue的生命周期在父子组件间遵循特定的执行顺序:

挂载阶段

  1. 父组件 beforeCreate
  2. 父组件 created
  3. 父组件 beforeMount
  4. 子组件 beforeCreate
  5. 子组件 created
  6. 子组件 beforeMount
  7. 子组件 mounted
  8. 父组件 mounted

更新阶段

  1. 父组件 beforeUpdate
  2. 子组件 beforeUpdate
  3. 子组件 updated
  4. 父组件 updated

卸载阶段

  1. 父组件 beforeUnmount
  2. 子组件 beforeUnmount
  3. 子组件 unmounted
  4. 父组件 unmounted

这种顺序符合"由外到内"创建和挂载,"由内到外"销毁的原则。

8.2 异步组件的生命周期

异步组件的生命周期与普通组件有所不同:

  1. 父组件 mounted
  2. 异步组件加载完成
  3. 异步组件 beforeCreate…mounted

在Vue 3中,defineAsyncComponent提供了更强大的异步组件支持,允许定义加载、错误等状态。

8.3 性能考量与调试

Vue 3提供了两个专门用于调试的生命周期钩子:

import { onRenderTracked, onRenderTriggered } from 'vue';// 当组件渲染过程中追踪到响应式依赖时触发
onRenderTracked((event) => {console.log('依赖被追踪:', event);
});// 当响应式依赖变化触发组件重新渲染时触发
onRenderTriggered((event) => {console.log('重新渲染被触发:', event);
});

这些钩子对于定位性能问题和理解组件重新渲染的原因非常有价值。

9. 组合式API与生命周期的最佳实践

9.1 逻辑组织示例

add-modal.vue为例,可以更深入地看到组合式API如何组织逻辑:

// 表单数据管理
function useFormData(options) {const formRef = ref(null);const formData = ref(initFormData());// 内部生命周期管理onMounted(() => {// 表单初始化逻辑});// 表单相关方法function resetForm() { /* ... */ }function validate() { /* ... */ }return {formRef,formData,resetForm,validate,// ...其他属性和方法};
}// 行业树管理
function useIndustryTree({ formData }) {const industryTreeData = ref([]);// 初始化方法function initIndustryTree() { /* ... */ }// 处理行业树变化function handleIndustryChange(val) {formData.value.industry = val;// ...其他逻辑}return {industryTreeData,initIndustryTree,handleIndustryChange,// ...其他属性和方法};
}

这种组织方式具有几个优势:

  1. 相关逻辑集中在一起,便于维护
  2. 跨组件复用变得简单
  3. 测试更加容易,可以独立测试每个组合函数

9.2 避免常见陷阱

  1. 不要在生命周期钩子中无条件修改响应式状态

    // 错误示例
    onUpdated(() => {// 无条件修改状态,导致无限更新循环count.value++;
    });// 正确示例
    onUpdated(() => {if (needsUpdate && !isUpdating.value) {isUpdating.value = true;count.value++;isUpdating.value = false;}
    });
    
  2. 确保清理所有副作用

    // 正确清理事件监听
    onMounted(() => {window.addEventListener('resize', handleResize);
    });onBeforeUnmount(() => {window.removeEventListener('resize', handleResize);
    });
    
  3. 不要依赖特定的钩子执行顺序

    // 避免跨组件钩子依赖
    const ready = ref(false);onMounted(() => {// 不要假设其他组件已经挂载// 使用其他机制(如props或事件)进行协调ready.value = true;
    });
    

10. 总结与展望

10.1 Vue生命周期演变的核心思想

Vue生命周期钩子的演变反映了几个核心思想:

  1. 从隐式到显式:Vue 3中的设计更加显式,使代码意图更清晰
  2. 从分散到聚合:组合式API允许按功能而非生命周期阶段组织代码
  3. 从固定到灵活:Vue 3中的生命周期钩子可以多次使用,更加灵活

10.2 生命周期使用的核心原则

无论使用Vue 2还是Vue 3,选择合适的生命周期钩子应遵循以下原则:

  1. 理解执行时机:清楚了解每个钩子的执行时机和可访问内容
  2. 最小必要原则:在尽可能晚的生命周期阶段执行操作
  3. 关注点分离:相关逻辑应该组织在一起,而非分散在不同钩子中
  4. 清理资源:确保在组件销毁前清理所有副作用

10.3 未来趋势

随着Vue生态系统的发展,我们可以预见几个趋势:

  1. 更细粒度的生命周期控制:未来可能提供更精细的生命周期控制
  2. 更强大的调试工具:专注于生命周期和性能分析的工具
  3. 更智能的编译时优化:根据生命周期使用模式进行自动优化

add-modal.vue这样的复杂组件中,Vue 3的组合式API和生命周期钩子的改进已经显示出明显优势,通过逻辑组织的改进,代码变得更加清晰、可维护,也更容易测试和优化。深入理解这些生命周期概念,对于构建高质量的Vue应用至关重要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/76365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java ai 图像处理

Java AI 图像处理 图像处理是人工智能&#xff08;AI&#xff09;领域中非常重要的一个应用方向。通过使用Java编程语言和相应的库&#xff0c;我们可以实现各种图像处理任务&#xff0c;如图像识别、图像分类、图像分割等。本文将介绍一些常见的图像处理算法&#xff0c;并通过…

从 0~1 保姆级 详细版 PostgreSQL 数据库安装教程

PostgreSQL数据库安装 PostgreSQL官网 【PostgreSQL官网】 | 【PostgreSQL安装官网_Windows】 安装步骤 step1&#xff1a; 选择与电脑相对应的PostgreSQL版本进行下载。 step2&#xff1a; 双击打开刚才下载好的文件。 step3&#xff1a; 在弹出的setup窗口中点击 …

Keil MDK中禁用半主机(No Semihosting)

在 ARM 编译器&#xff08;如 Keil MDK&#xff09; 中禁用半主机&#xff08;Semihosting&#xff09;并实现标准库的基本功能&#xff0c;需要以下步骤&#xff1a; 1. 禁用半主机 #pragma import(__use_no_semihosting) // 禁用半主机模式作用&#xff1a;防止标准库函数&…

github | 仓库权限管理 | 开权限

省流版总结&#xff1a; github 给别人开权限&#xff1a;仓库 -> Setting -> Cllaborate -> Add people GitHub中 将公开仓库改为私有&#xff1a;仓库 -> Setting -> Danger Zone&#xff08;危险区&#xff09; ->Change repository visibility( 更改仓…

快速部署大模型 Openwebui + Ollama + deepSeek-R1模型

背景 本文主要快速部署一个带有web可交互界面的大模型的应用&#xff0c;主要用于开发测试节点&#xff0c;其中涉及到的三个组件为 open-webui Ollama deepSeek开放平台 首先 Ollama 是一个开源的本地化大模型部署工具,提供与OpenAI兼容的Api接口&#xff0c;可以快速的运…

极狐GitLab 项目导入导出设置介绍?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 导入导出设置 (BASIC SELF) 导入和导出相关功能的设置。 配置允许的导入源 在从其他系统导入项目之前&#xff0c;必须为该…

信奥还能考吗?未来三年科技特长生政策变化

近年来&#xff0c;科技特长生已成为名校录取的“黄金敲门砖”。 从CSP-J/S到NOI&#xff0c;编程竞赛成绩直接关联升学优势。 未来三年&#xff0c;政策将如何调整&#xff1f;家长该如何提前布局&#xff1f; 一、科技特长生政策趋势&#xff1a;2025-2027关键变化 1. 竞…

AI测试用例生成平台

AI测试用例生成平台 项目背景技术栈业务描述项目展示项目重难点 项目背景 针对传统接口测试用例设计高度依赖人工经验、重复工作量大、覆盖场景有限等行业痛点&#xff0c;基于大语言模型技术实现接口测试用例智能生成系统。 技术栈 LangChain框架GLM-4模型Prompt Engineeri…

操作系统-PV

&#x1f9e0; 背景&#xff1a;为什么会有 PV&#xff1f; 类比&#xff1a;内存&#xff08;生产者&#xff09; 和 CPU&#xff08;消费者&#xff09; 内存 / IO / 磁盘 / 网络下载 → 不断“生产数据” 例如&#xff1a;读取文件、下载视频、从数据库加载信息 CPU → 负…

工厂方法模式详解及在自动驾驶场景代码示例(c++代码实现)

模式定义 工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;通过定义抽象工厂接口将对象创建过程延迟到子类实现&#xff0c;实现对象创建与使用的解耦。该模式特别适合需要动态扩展产品类型的场景。 自动驾驶感知场景分析 自动驾…

基于 S2SH 架构的企业车辆管理系统:设计、实现与应用

在企业运营中&#xff0c;车辆管理是一项重要工作。随着企业规模的扩大&#xff0c;车辆数量增多&#xff0c;传统管理方式效率低下&#xff0c;难以满足企业需求。本文介绍的基于 S2SH 的企业车辆管理系统&#xff0c;借助现代化计算机技术&#xff0c;实现车辆、驾驶员和出车…

IntelliJ IDEA download JDK

IntelliJ IDEA download JDK 自动下载各个版本JDK&#xff0c;步骤 File - Project Structure &#xff08;快捷键 Ctrl Shift Alt S&#xff09; 如果下载失败&#xff0c;换个下载站点吧。一般选择Oracle版本&#xff0c;因为java被Oracle收购了 好了。 花里胡哨&#…

MCP协议在纳米材料领域的深度应用:从跨尺度协同到智能研发范式重构

MCP协议在纳米材料领域的深度应用&#xff1a;从跨尺度协同到智能研发范式重构 文章目录 MCP协议在纳米材料领域的深度应用&#xff1a;从跨尺度协同到智能研发范式重构一、MCP协议的技术演进与纳米材料研究的适配性分析1.1 MCP协议的核心架构升级1.2 纳米材料研发的核心挑战与…

OpenAI发布GPT-4.1:开发者专属模型的深度解析 [特殊字符]

最近OpenAI发布了GPT-4.1模型&#xff0c;却让不少人感到困惑。今天我们就来深入剖析这个新模型的关键信息&#xff01; 重要前提&#xff1a;API专属模型 &#x1f4bb; 首先需要明确的是&#xff0c;GPT-4.1仅通过API提供&#xff0c;不会出现在聊天界面中。这是因为该模型主…

DemoGen:用于数据高效视觉运动策略学习的合成演示生成

25年2月来自清华、上海姚期智研究院和上海AI实验室的论文“DemoGen: Synthetic Demonstration Generation for Data-Efficient Visuomotor Policy Learning”。 视觉运动策略在机器人操控中展现出巨大潜力&#xff0c;但通常需要大量人工采集的数据才能有效执行。驱动高数据需…

界面控件DevExpress WPF v25.1新功能预览 - 文档处理类功能升级

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

Muduo网络库实现 [十六] - HttpServer模块

目录 设计思路 类的设计 模块的实现 公有接口 私有接口 疑问点 设计思路 本模块就是设计一个HttpServer模块&#xff0c;提供便携的搭建http协议的服务器的方法。那么这个模块需要如何设计呢&#xff1f; 这还需要从Http请求说起。 首先从http请求的请求行开始分析&…

多模态记忆融合:基于LSTM的连续场景生成——突破AI视频生成长度限制

一、技术背景与核心挑战 2025年视频生成领域面临的关键难题是长时程连贯性——传统方法在生成超过5分钟视频时会出现场景跳变、物理规则不一致等问题。本研究提出时空记忆融合架构&#xff08;ST-MFA&#xff09;&#xff0c;通过LSTM记忆门控与多模态对齐技术&#xff0c;在R…

LabVIEW油气井井下集成监测系统

LabVIEW平台开发的油气井井下集成监测系统通过实时监控油气井的井下环境参数&#xff0c;如温度、压力和有害气体含量&#xff0c;有效提高了油气采收率并确保了作业安全。系统利用高精度传感器和强大的数据处理能力&#xff0c;通过综合监测和分析&#xff0c;实现了对油气井环…

【python画图】:从入门到精通绘制完美柱状图

目录 Python数据可视化&#xff1a;从入门到精通绘制完美柱状图一、基础篇&#xff1a;快速绘制柱状图1.1 使用Matplotlib基础绘制1.2 使用Pandas快速绘图 二、进阶篇&#xff1a;专业级柱状图定制2.1 多系列柱状图2.2 堆叠柱状图2.3 水平柱状图 三、专业参数速查表Matplotlib …