Vue2到Vue3:无痛升级之路

news2025/5/18 23:33:48

为什么要从 Vue2 升级到 Vue3

Vue 3 带来了众多令人瞩目的改进和新特性,这些优势使得升级到 Vue 3 对项目的长期发展具有重要意义。

性能显著提升:Vue 3 采用了基于 Proxy 的响应式系统,相比 Vue 2 使用的 Object.defineProperty,能够更高效地追踪变化,包括数组的变化和动态添加的属性,从而减少不必要的渲染。在处理大型数据列表时,Vue 3 的响应式系统能够精准地识别数据变化,只更新受影响的组件部分,大大提高了渲染效率。Vue 3 在编译模板时会进行静态提升,将静态内容提升到组件的根节点,减少重复的 DOM 操作。在一个包含大量静态文本和少量动态数据的组件中,Vue 3 只会对动态数据部分进行重新渲染,而静态部分则无需重新处理,极大地提升了渲染速度。Vue 3 还改进了虚拟 DOM 的 diff 算法,使得组件更新更加高效,并且更好地支持 Tree - shaking,移除未使用的代码,减小最终的打包体积。

Composition API 的强大优势:Vue 3 引入的 Composition API 为开发者提供了更灵活的代码组织方式。它允许将复杂的组件逻辑拆分成可复用的函数,使得代码的逻辑复用和性能优化更加容易。在一个具有多种功能的组件中,如同时包含数据获取、数据处理和用户交互逻辑,使用 Composition API 可以将这些功能分别封装成独立的函数,然后在 setup 函数中组合使用,使代码结构更加清晰,易于维护和测试。这对于大型项目中多人协作开发时,避免代码冲突和混乱非常有帮助。

更好的 TypeScript 支持:Vue 3 在设计和实现过程中,做了大量工作来更好地支持 TypeScript。它的核心代码完全使用 TypeScript 重写,提供了详细的类型定义文件,涵盖了 Vue 的所有核心功能和 API。在定义组件的 props、data、computed 和 methods 等选项时,TypeScript 可以自动推导类型,不再需要显式地定义类型,减少了重复代码,提高了开发效率。这使得开发者在编写代码时能够提前发现潜在的错误,降低运行时错误的概率,同时也提升了代码的可维护性和可读性,尤其适合大型项目的开发。

升级前的准备工作

备份项目

在进行任何升级操作之前,务必备份整个项目。备份是应对升级过程中可能出现问题的重要保障,它能确保在升级失败或出现意外情况时,我们能够迅速恢复到项目的原始状态,避免数据丢失和项目进度的延误。备份的方法多种多样,对于使用版本控制系统(如 Git)的项目,创建一个新的分支是非常简便且有效的方式。在命令行中,切换到项目的根目录,执行git checkout -b vue3_upgrade命令,即可创建一个名为vue3_upgrade的新分支,所有的升级操作都可以在这个分支上进行。如果项目没有使用版本控制系统,也可以手动复制整个项目文件夹,将其重命名为带有备份标识的名称,如my_project_backup ,确保备份的完整性和可追溯性。

了解 Vue 3 的变化

在着手升级项目之前,深入了解 Vue 3 与 Vue 2 之间的差异至关重要,这能让我们在升级过程中更加从容地应对各种变化。

API 变化:Vue 2 主要采用选项式 API(Options API),开发者通过在组件中定义datamethodscomputedwatch等选项来组织代码逻辑。而 Vue 3 引入了组合式 API(Composition API),它允许我们将相关的逻辑代码组合在一起,以函数的形式进行复用和管理。在处理一个包含数据获取、数据处理和用户交互逻辑的组件时,使用 Vue 2 的选项式 API,这些逻辑可能分散在不同的选项中;而在 Vue 3 中,使用组合式 API 可以将这些逻辑封装在独立的函数中,然后在setup函数中进行组合使用,使代码结构更加清晰,易于维护和测试。

生命周期变化:Vue 3 的生命周期钩子在名称和使用方式上与 Vue 2 有所不同。例如,Vue 2 中的beforeDestroy在 Vue 3 中变为onBeforeUnmountdestroyed变为onUnmounted。在 Vue 3 中使用组合式 API 时,需要先引入生命周期钩子函数,如import { onMounted, onUnmounted } from 'vue'; ,然后在setup函数中使用。而在 Vue 2 中,可以直接在组件选项中使用这些生命周期钩子。

响应式系统变化:Vue 2 使用Object.defineProperty来实现响应式系统,它在追踪对象属性变化时存在一些局限性,比如无法监听对象新增属性和删除属性的变化,对于数组的某些操作(如直接通过索引修改数组元素)也不能很好地追踪。Vue 3 则采用了 ES6 的Proxy来实现响应式系统,Proxy可以代理整个对象,包括数组和嵌套对象,能够更全面、高效地追踪数据变化,解决了 Vue 2 中响应式系统的一些痛点 。

检查依赖兼容性

升级到 Vue 3 后,项目中使用的依赖包可能需要相应的更新,以确保与 Vue 3 的兼容性。以下是一些常见依赖在 Vue 3 中的版本要求及检查更新方法:

Vue Router:Vue 3 需要搭配 Vue Router 4 及以上版本使用。检查当前项目中 Vue Router 的版本,可以在项目根目录下的命令行中执行npm list vue-router ,查看输出结果中的版本号。如果版本低于 4,可以通过npm install vue-router@next --save命令来安装最新版本的 Vue Router。

Vuex:对于 Vue 3 项目,需要使用 Vuex 4。同样地,通过npm list vuex检查当前版本,若版本不符合要求,使用npm install vuex@next --save进行更新。

其他第三方库:对于项目中使用的其他第三方库,如 UI 组件库(Element - UI、Ant Design Vue 等),也需要检查它们是否支持 Vue 3,并根据官方文档的指引进行版本更新。例如,Element - UI 在 Vue 3 中的版本为element-plus ,需要先卸载旧版本的 Element - UI,再安装element-plus

在更新依赖后,务必仔细查看依赖的更新日志,了解可能存在的 API 变化和兼容性问题,避免因依赖更新而引入新的错误。同时,建议在更新依赖后,对项目进行全面的测试,确保各个功能模块正常运行。

升级步骤

安装 Vue CLI

Vue CLI 是 Vue.js 官方的脚手架工具,它可以帮助我们快速搭建 Vue 项目,并且提供了一系列的插件和命令来简化项目的开发和维护。如果你的项目是使用 Vue CLI 创建的,并且版本低于 4.5.0,建议将其更新到最新版本,以确保对 Vue 3 的全面支持。在命令行中执行以下命令来更新 Vue CLI:

npm install -g @vue/cli

# 或者使用yarn

yarn global add @vue/cli

安装完成后,可以通过vue -V命令来检查安装的版本,确保版本号在 4.5.0 及以上。

更新 Vue 依赖

在项目的根目录下,找到package.json文件,将其中的vue依赖版本从 2.x 更新为 3.x。假设原来的vue依赖为"vue": "^2.6.11",将其修改为"vue": "^3.2.47"(这里以最新的稳定版本为例,实际操作时请根据 Vue 3 的最新版本进行更新)。修改完成后,在命令行中执行npm installyarn命令,这会自动下载并安装 Vue 3 及其相关依赖。

更新其他依赖

除了 Vue 核心库之外,项目中使用的其他依赖库也可能需要更新,以确保与 Vue 3 的兼容性。例如,Vue Router 和 Vuex 是 Vue 生态系统中常用的路由管理和状态管理库,在 Vue 3 项目中,需要使用 Vue Router 4 和 Vuex 4。同样在package.json文件中,将vue-routervuex的版本更新为对应的最新版本。如果使用了其他第三方库,如 UI 组件库(Element - UI、Ant Design Vue 等),也需要查阅它们的官方文档,了解是否有针对 Vue 3 的版本,并进行相应的更新。更新完成后,运行npm installyarn来安装新的依赖。

迁移配置和构建工具

修改 vue.config.js

在 Vue 3 中,vue.config.js的配置与 Vue 2 基本保持一致,但在某些情况下可能需要进行一些调整。如果项目中使用了自定义的 Webpack 配置,例如添加了新的插件或修改了加载器的配置,需要确保这些配置在 Vue 3 中仍然有效。在 Vue 3 中,vue.config.js中的chainWebpackconfigureWebpack选项的使用方式没有改变。如果在 Vue 2 中通过chainWebpack配置了svg-sprite-loader来处理 SVG 图标,在 Vue 3 中可以继续使用相同的配置:

module.exports = {

  chainWebpack: config => {

    config.module

     .rule('svg')

     .exclude.add(resolve('src/assets/icons'))

     .end();

    config.module

     .rule('icons')

     .test(/\.svg$/)

     .include.add(resolve('src/assets/icons'))

     .end()

     .use('svg-sprite-loader')

     .loader('svg-sprite-loader')

     .options({ symbolId: 'icon-[name]' });

  }

};

不过,需要注意的是,一些旧版本的 Webpack 插件可能不兼容 Vue 3,需要更新到支持 Vue 3 的版本。

更新 Babel 配置

如果项目使用 Babel 进行代码转换,需要确保 Babel 配置能够支持 Vue 3。首先,确保安装了最新版本的@vue/babel - preset - app,这是 Vue 官方提供的 Babel 预设,用于处理 Vue 项目的代码转换。在package.json文件中,检查@vue/babel - preset - app的版本,并通过npm installyarn进行更新。如果项目中存在自定义的 Babel 配置,例如在.babelrcbabel.config.js文件中定义了特殊的插件或预设,需要检查这些配置是否与 Vue 3 兼容。在 Vue 3 中,由于响应式系统和一些语法的变化,可能需要调整 Babel 配置以正确处理这些新特性。

调整 TypeScript 配置

对于使用 TypeScript 的项目,需要更新tsconfig.json文件以适应 Vue 3。首先,确保 TypeScript 的版本在 3.9 及以上,因为 Vue 3 需要较高版本的 TypeScript 来提供更好的类型支持。在tsconfig.json文件中,需要调整一些编译选项。例如,将target设置为esnext,以支持最新的 ECMAScript 特性;将module设置为esnext,以确保模块的正确导入和导出;启用strict模式,以提高代码的类型安全性。以下是一个示例的tsconfig.json配置:

{

  "compilerOptions": {

    "target": "esnext",

    "module": "esnext",

    "moduleResolution": "node",

    "jsx": "preserve",

    "strict": true,

    "esModuleInterop": true,

    "skipLibCheck": true,

    "forceConsistentCasingInFileNames": true,

    "noImplicitReturns": true,

    "noFallthroughCasesInSwitch": true,

    "allowSyntheticDefaultImports": true,

    "resolveJsonModule": true,

    "isolatedModules": true,

    "noEmit": true,

    "types": ["webpack-env", "@types/node", "@vue/cli-plugin-babel/types", "@vue/cli-plugin-eslint/types", "@vue/cli-service"]

  },

  "include": ["src/**/*"],

  "exclude": ["node_modules", "dist"]

}

此外,Vue 3 中的类型定义文件(.d.ts)有所改变,需要确保项目中的类型定义文件是最新的,以避免类型错误。

调整 Vue 实例和生命周期钩子

创建 Vue 实例

在 Vue 2 中,我们通过new Vue()来创建一个 Vue 实例,并传入一个包含各种选项的对象,如eldatamethods等。例如:

import Vue from 'vue';

import App from './App.vue';

new Vue({

  el: '#app',

  render: h => h(App)

});

在 Vue 3 中,使用createApp函数来创建一个应用实例。createApp函数返回一个应用实例,我们可以在这个实例上进行全局配置,如注册组件、指令、混入等。然后通过mount方法将应用挂载到指定的 DOM 元素上。代码示例如下:

import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);

app.mount('#app');

生命周期钩子变化

Vue 3 对生命周期钩子进行了一些调整,部分钩子的名称发生了变化,并且提供了与组合式 API(Composition API)配合使用的新方式。Vue 2 中的beforeCreatecreated钩子在 Vue 3 中被setup函数所替代,setup函数在组件创建之前执行,用于初始化组件的响应式数据、计算属性、方法等。Vue 2 中的beforeDestroy钩子在 Vue 3 中变为onBeforeUnmountdestroyed钩子变为onUnmounted。在使用选项式 API 时,这些钩子的使用方式基本不变,但在使用组合式 API 时,需要通过import语句引入相应的钩子函数,并在setup函数中调用。例如,在 Vue 2 中使用beforeDestroy钩子:

export default {

  beforeDestroy() {

    console.log('组件即将销毁');

  }

};

在 Vue 3 中使用组合式 API 的onBeforeUnmount钩子:

import { onBeforeUnmount } from 'vue';

export default {

  setup() {

    onBeforeUnmount(() => {

      console.log('组件即将销毁');

    });

  }

};

Vue 3 中其他生命周期钩子也有类似的变化,如beforeMount变为onBeforeMountmounted变为onMountedbeforeUpdate变为onBeforeUpdateupdated变为onUpdated。在迁移过程中,需要根据实际情况将 Vue 2 中的生命周期钩子替换为 Vue 3 中的对应钩子。

迁移到 Composition API(可选)

介绍 Composition API

Composition API 是 Vue 3 引入的一个新特性,它为开发者提供了一种更灵活、更高效的方式来组织和复用组件逻辑。与 Vue 2 中使用的选项式 API(Options API)不同,Composition API 允许我们将相关的逻辑代码组合在一起,以函数的形式进行复用和管理。在处理一个包含数据获取、数据处理和用户交互逻辑的组件时,使用选项式 API,这些逻辑可能分散在datamethodscomputedwatch等不同的选项中;而使用 Composition API,可以将这些功能分别封装成独立的函数,然后在setup函数中组合使用,使代码结构更加清晰,易于维护和测试。Composition API 还提供了更好的逻辑复用性,通过将通用的逻辑提取到自定义的钩子函数(Hook)中,可以在多个组件中共享这些逻辑,减少代码的重复。

逐步迁移代码

从 Options API 迁移到 Composition API 可以逐步进行,不必一次性将所有组件都转换。可以先从一些简单的、独立的组件开始,熟悉 Composition API 的使用方式,然后再逐步应用到更复杂的组件中。在迁移过程中,需要将组件中的数据、方法、计算属性、生命周期钩子等逻辑从 Options API 的方式转换为 Composition API 的方式。对于一个简单的计数器组件,在 Vue 2 中使用 Options API 的代码如下:

<template>

  <div>

    <p>{{ count }}</p>

    <button @click="increment">Increment</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      count: 0

    };

  },

  methods: {

    increment() {

      this.count++;

    }

  }

};

</script>

使用 Composition API 迁移后的代码如下:

<template>

  <div>

    <p>{{ count }}</p>

    <button @click="increment">Increment</button>

  </div>

</template>

<script>

import { ref } from 'vue';

export default {

  setup() {

    const count = ref(0);

    const increment = () => {

      count.value++;

    };

    return {

      count,

      increment

    };

  }

};

</script>

在这个例子中,使用ref函数创建了一个响应式的count变量,ref函数会返回一个包含value属性的对象,通过修改value属性来更新数据。定义了increment函数来增加count的值。最后,将countincrement通过return语句暴露给模板使用。对于更复杂的组件,可能还需要处理计算属性、生命周期钩子、监听属性等,都可以按照 Composition API 的方式进行相应的转换。

迁移 Vue Router 和 Vuex

Vue Router 迁移

如果项目中使用了 Vue Router 进行路由管理,在升级到 Vue 3 后,需要将 Vue Router 更新到 4.x 版本。Vue Router 4 对一些 API 和用法进行了调整,以适应 Vue 3 的新特性。在安装 Vue Router 4 后,需要修改路由配置文件(通常是src/router/index.js)。在 Vue Router 3 中,创建路由实例的方式如下:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/views/Home.vue';

Vue.use(Router);

export default new Router({

  routes: [

    {

      path: '/',

      name: 'home',

      component: Home

    }

  ]

});

在 Vue Router 4 中,使用createRoutercreateWebHashHistory(或createWebHistory)来创建路由实例:

import { createRouter, createWebHashHistory } from 'vue-router';

import Home from '@/views/Home.vue';

const routes = [

  {

    path: '/',

    name: 'home',

    component: Home

  }

];

const router = createRouter({

  history: createWebHashHistory(),

  routes

});

export default router;

此外,在组件中使用路由的方式也有一些变化。在 Vue Router 3 中,使用$router$route来进行路由导航和获取路由信息;在 Vue Router 4 中,在 setup 函数中使用useRouteruseRoute函数来获取路由实例和当前路由信息。在模板中,router-link组件的to属性绑定方式也有所不同,需要使用动态绑定语法:

Vuex 迁移

对于使用 Vuex 进行状态管理的项目,在 Vue 3 中需要将 Vuex 更新到 4.x 版本。Vuex 4 对 API 进行了一些调整,以适配 Vue 3 的新特性。在安装 Vuex 4 后,需要修改 Vuex 的配置文件(通常是src/store/index.js)。在 Vuex 3 中,创建 Store 实例的方式如下:

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment(state) {

      state.count++;

    }

  },

  actions: {

    incrementAction({ commit }) {

      commit('increment');

    }

  }

});

在 Vuex 4 中,创建 Store 实例的方式基本不变,但在使用时,在 setup 函数中通过useStore函数来获取 Store 实例,从而访问和修改状态。在组件中使用mapStatemapMutations等辅助函数的方式也有所变化,需要根据 Vuex 4 的文档进行相应的调整。

解决不兼容的 API

在升级到 Vue 3 的过程中,会遇到一些在 Vue 3 中弃用或修改的 API,需要进行相应的替换。在 Vue 2 中,可以使用v-bind="$listeners"将所有父组件传递的事件监听器绑定到子组件上,在 Vue 3 中,这种语法被弃用,需要改为v-bind="listeners"。在 Vue 2 中,可以使用Vue.filter注册全局过滤器,在 Vue 3 中,需要使用app.config.globalProperties.$filter。例如,在 Vue 2 中注册全局过滤器:

Vue.filter('formatDate', function (date) {

  // 格式化日期的逻辑

  return date.toLocaleDateString();

});

在 Vue 3 中注册全局过滤器:

import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);

app.config.globalProperties.$filter('formatDate', function (date) {

  return date.toLocaleDateString();

});

app.mount('#app');

Vue 2 中的v-on:click.native在 Vue 3 中需要改为@click.nativev-on:keyup.enter在 Vue 3 中改为@keyup.enter等。在迁移过程中,需要仔细查阅 Vue 3 的官方文档,了解这些 API 的变化,并逐一进行替换,以确保项目能够在 Vue 3 环境中正常运行。

测试和调试

编写单元测试

在 Vue 项目中,使用 Vue Test Utils 和 Jest 可以高效地编写单元测试,确保组件的功能正确性。以一个简单的按钮组件Button.vue为例,假设这个组件有一个按钮,点击按钮会触发一个方法handleClick,并且会传递一个自定义的事件参数customData。首先,确保项目中已经安装了 Vue Test Utils 和 Jest,可通过以下命令安装:

npm install @vue/test-utils jest --save-dev

# 或者使用yarn

yarn add @vue/test-utils jest --dev

Button.vue中,代码如下:

<template>

  <button @click="handleClick">Click Me</button>

</template>

<script>

export default {

  methods: {

    handleClick() {

      this.$emit('custom-event', 'customData');

    }

  }

};

</script>

然后,创建测试文件Button.spec.js,编写测试用例:

import { mount } from '@vue/test-utils';

import Button from '@/components/Button.vue';

describe('Button.vue', () => {

  it('should emit custom event when button is clicked', async () => {

    const wrapper = mount(Button);

    // 模拟按钮点击事件

    await wrapper.find('button').trigger('click');

    // 断言是否触发了自定义事件,并传递了正确的参数

    expect(wrapper.emitted('custom-event')).toBeTruthy();

    expect(wrapper.emitted('custom-event')[0][0]).toBe('customData');

  });

});

在这个测试用例中,使用mount方法挂载Button组件,然后通过find方法找到按钮元素,并使用trigger方法模拟点击事件。最后,使用expect断言组件是否触发了custom-event事件,并且传递的参数是否正确。这样就完成了一个简单组件的单元测试编写。

全面测试

在完成项目升级后,进行全面的测试是确保项目质量和稳定性的关键环节。全面测试涵盖多个方面,包括功能测试、兼容性测试、性能测试等。功能测试是验证升级后的项目是否满足业务需求,确保各个功能模块正常运行。可以使用自动化测试工具(如 Cypress、Selenium 等)编写测试用例,模拟用户的操作流程,检查页面元素的显示、交互功能的正确性以及数据的处理和存储是否符合预期。兼容性测试确保项目在不同的浏览器(如 Chrome、Firefox、Safari、Edge 等)、操作系统(如 Windows、MacOS、Linux、iOS、Android 等)以及不同设备(如桌面电脑、笔记本电脑、平板、手机等)上都能正常运行。通过在多种环境下进行测试,能够发现并解决因浏览器差异、操作系统特性或设备屏幕尺寸等因素导致的兼容性问题。性能测试评估项目在不同负载下的性能表现,包括页面加载速度、响应时间、内存占用等指标。可以使用工具(如 Lighthouse、Google PageSpeed Insights 等)来模拟不同的网络环境和用户并发量,对项目进行性能测试,根据测试结果进行性能优化,如优化代码结构、压缩资源文件、缓存数据等,以提升用户体验。

解决问题

在升级过程中,难免会遇到各种问题,以下是一些常见问题及解决方案:

依赖冲突:在更新依赖后,可能会出现依赖冲突的情况,导致项目无法正常运行。此时,可以使用npm ls命令查看依赖树,找出冲突的依赖包。然后,根据依赖包的文档,尝试指定特定的版本来解决冲突。如果依赖冲突较为复杂,可以考虑使用yarnresolutions字段来强制指定依赖的版本。在package.json文件中添加如下配置:

{

  "resolutions": {

    "冲突的依赖包名": "指定的版本号"

  }

}

语法错误:由于 Vue 3 对一些语法进行了调整,在迁移代码时可能会引入语法错误。仔细检查控制台输出的错误信息,根据 Vue 3 的文档进行语法修正。在使用 Composition API 时,确保正确引入和使用相关的函数和变量。如果对某个语法的使用不确定,可以参考 Vue 3 的官方文档或社区论坛,获取更多的示例和指导。

组件不显示或显示异常:如果升级后组件不显示或显示异常,首先检查组件的模板语法是否正确,是否存在拼写错误或缺少必要的标签。确认组件的样式是否正确加载,是否存在样式冲突的问题。可以使用浏览器的开发者工具,查看元素的样式和布局,找出问题所在。检查组件的生命周期钩子函数是否正确使用,是否在合适的时机执行了必要的操作。

总结

从 Vue 2 升级到 Vue 3 虽然是一个具有挑战性的过程,但通过全面了解 Vue 3 的变化、认真做好升级前的准备工作、严格按照升级步骤进行操作,并在升级后进行充分的测试和调试,我们能够顺利完成升级,享受到 Vue 3 带来的性能提升、新特性以及更好的开发体验。在升级过程中,遇到问题不要慌张,仔细查阅官方文档和相关资料,积极寻求社区的帮助,总能找到解决方案。希望本文能为你将 Vue 2 项目升级到 Vue 3 提供清晰的指导和有力的支持,鼓励你勇敢地迈出这一步,开启 Vue 3 的开发之旅。

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

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

相关文章

第28篇 基于ARM A9处理器用C语言实现中断<四>

Q&#xff1a;可以改变上一期实验工程里红色LED计数的速率吗&#xff1f; A&#xff1a;在按键中断服务程序中使HPS Timer 0停止计数&#xff0c;修改定时器中使用的预设计数值&#xff0c;然后重启定时器&#xff1b;所有的修改都是在按键中断服务程序中完成。主程序和其他…

时间序列分析(四)——差分运算、延迟算子、AR(p)模型

此前篇章&#xff1a; 时间序列分析&#xff08;一&#xff09;——基础概念篇 时间序列分析&#xff08;二&#xff09;——平稳性检验 时间序列分析&#xff08;三&#xff09;——白噪声检验 一、差分运算 差分运算的定义&#xff1a;差分运算是一种将非平稳时间序列转换…

《深度学习》——调整学习率和保存使用最优模型

调整学习率 在使用 PyTorch 进行深度学习训练时&#xff0c;调整学习率是一个重要的技巧&#xff0c;合适的学习率调整策略可以帮助模型更好地收敛。 PyTorch 提供了多种调整学习率的方法&#xff0c;下面将详细介绍几种常见的学习率调整策略及实例代码&#xff1a; torch.opt…

零风险把数据盘挂载给根分区,给生产环境服务器扩容

背景 刚买服务器时&#xff0c;用户量不大&#xff0c;所以结合预算不多情况下&#xff0c;都是默认买个小点的系统盘挂载到服务器上&#xff0c;&#xff08;或者默认服务器的40G&#xff09;&#xff0c;等到某一天业务量上来之后&#xff0c;发现抓肘见襟给自己一手措不及防…

在vscode中拉取gitee里的项目并运行

拉取项目: 方法一:vscode点击查看--->终端(或者直接通过快捷键ctrol+ `打开) 在终端内通过cd命令定位到你想存放项目的文件夹 例如:cd h: 通过命令:git clone 地址 例如:git clone newbee-mall-vue-app: 前端代码 等待拉取完成即可在对应文件夹下看到项目啦 方…

IDEA通过Contince接入Deepseek

Deepseek 的出色表现&#xff0c;上期【Deepseek得两种访问方式与本地部署】 安装Continue插件 第一步、下载插件 在编辑栏【File】->设置【Settiings】或快捷键【CtrlAltS】,弹窗的左侧导航树&#xff0c;选择【plugins】,在marketplace 搜索【Continue】&#xff0c;点…

数据结构------单向链表。

一.实现单向链表的头插&#xff0c;头删&#xff0c;尾插&#xff0c;尾删&#xff0c;按位置插&#xff0c;按位置删&#xff0c;按位置修改&#xff0c;按元素查找&#xff0c;按元素修改&#xff0c;按元素删除&#xff0c;单链表的逆置&#xff0c;查找倒数第几个元素&…

算法——结合实例了解Minimax算法(极小化极大算法)

计算机科学中最有趣的事情之一就是编写一个人机博弈的程序。有大量的例子&#xff0c;最出名的是编写一个国际象棋的博弈机器。但不管是什么游戏&#xff0c;程序趋向于遵循一个被称为Minimax算法&#xff0c;伴随着各种各样的子算法在一块。本篇将简要介绍 minimax 算法&#…

cornerstone3D学习笔记-MPR

最近在研究如何利用cornerstone3D (v1.70.13) 来实现MPR功能&#xff0c;找到它的一个demo -- volumeBasic, 运行效果如下图 看了下主程序的示例代码&#xff0c;非常简单&#xff0c;可以说corestone3D这个库把很多细节都封装起来了&#xff0c;使得调用者可以很简单的快速实…

C++ Primer 函数匹配

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…

Dav_笔记14:优化程序提示 HINTs -4

指定全局表提示 指定表的提示通常是指发生提示的DELETE&#xff0c;SELECT或UPDATE查询块中的表&#xff0c;而不是指语句引用的任何视图中的表。 如果要为显示在视图中的表指定提示&#xff0c;Oracle建议使用全局提示&#xff0c;而不是在视图中嵌入提示。 您可以使用包含具…

桥接模式 Bridge Pattern

桥接模式Abstraction 和 Implementor 的理解 在图书馆看到一本 通过电商项目真正实战《贯穿设计模式》。拿起来翻到了 桥接模式&#xff0c;感觉味道不对&#xff0c;和我印象中不一样。 感谢这位同学提供的源码 贯穿设计模式-适配器模式桥接模式_-CSDN博客GitHub - WeiXiao…

Ubuntu 安装 OpenCV (C++)

版本详情&#xff1a; Ubuntu: 22.04 5.15.0-133-generic gcc: 11.4.0 g: 11.4.0 OpenCV: 4.7.0 1. 卸载 OpenCV 进入原先编译 opencv 的 build 目录&#xff0c;在该目录下打开终端&#xff0c;执行以下代码&#xff08;如果 build 已经删除了&#xff0c;可以重新编译一…

前端模板引擎

前言 正常渲染拿到数据后渲染&#xff0c;三步走&#xff1a;格式化数据、编译模板、渲染数据 如下例 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice…

长尾词SEO优化软件:企业官网流量提升的软件【实测】

搜索引擎流量中68%来自长尾关键词&#xff08;数据来源&#xff1a;Ahrefs 2025&#xff09;&#xff0c;但83%企业仍困于「高价值长尾词难挖掘内容生产跟不上」的双重困境。当同行用智能工具批量布局「孕妇防辐射服哪个牌子好」等精准词时&#xff0c;手动分析数据的你可能还在…

用自己的数据训练yolov11目标检测

文章目录 概要理论知识整体架构流程架构优化多任务支持多参数体量 操作实操环境配置数据准备数据标注数据放置路径 训练预测 概要 YOLOv11 是 Ultralytics 团队于 2024 年 9 月 30 日发布的最新目标检测模型&#xff0c;延续了 YOLO 系列实时推理特性&#xff0c;同时通过架构优…

gsoap实现webservice服务

gsoap实现webservice服务 在实现Web服务时&#xff0c;使用gSOAP是一个很好的选择&#xff0c;因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库&#xff0c;它支持SOAP协议的各种版本&#xff0c;包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…

项目2 数据可视化--- 第十五章 生成数据

数据分析是使用代码来探索数据内的规律和关联。 数据可视化是通过可视化表示来 探索和呈现数据集内的规律。 好的数据可视化&#xff0c;可以发现数据集中未知的规律和意义。 一个流行的工具是Matplotlib&#xff0c;他是一个数据绘图库&#xff1b; 还有Plotly包&#xff…

QT (四)模型/视图 QFileSystemModel,QStringListModel,QStandardItemModel

思考&#xff1a;QTableWidget 在某种程度上可以等价为QStandardItemModel&#xff0c;同理&#xff0c;其他的功能也有类似的等价&#xff0c;但是以当前的QTableWidget 和QStandardItemModel为例的话&#xff0c;两者都是用于实现建立表格的相关组件&#xff0c;只不过QStand…

. Unable to find a @SpringBootConfiguration(默认软件包中的 Spring Boot 应用程序)

解决&#xff1a; 新建一个包即可 问题&#xff1a; 默认软件包中的 Spring Boot 应用程序。 原因&#xff1a; 默认包的定义 &#xff1a; 如果一个 Java 类没有使用 package 声明包名&#xff0c;则该类会被放置在默认包中。Spring Boot 遵循 Java 的包管理约定&#xff…