【Vue】vue2应用与vue3的不同之处
CrazyPanda发表于：2024-04-23 21:21:03浏览：338次
上一篇，我使用了vue2创建了一个应用，这次我使用vue3创建一个应用，看一下两者有什么不同。
如下，是我用cue3创建的应用目录
发现和vue2应用的目录一模一样，然后我用对比工具对比了两者的文件。
1. 文件区别
下面是package.json文件的区别，首先vue版本不同，对应的扩展组件也不同。
下面是main.js的不同
然后是APP.vue的不同
2. 全局实例改变
| 2.x 全局 API | 3.x 实例 API (app) |
|---|---|
| Vue.config | app.config |
| Vue.config.productionTip | 移除 (见下方) |
| Vue.config.ignoredElements | app.config.compilerOptions.isCustomElement (见下方) |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use (见下方) |
| Vue.prototype | app.config.globalProperties (见下方) |
| Vue.extend | 移除 (见下方) |
这也是我们看到main.js中不同的地方。
3. 生命周期不同
在 Vue 2 中，自定义指令通过使用下列钩子来创建，以对齐元素的生命周期，它们都是可选的：
bind - 指令绑定到元素后调用。只调用一次。 inserted - 元素插入父 DOM 后调用。 update - 当元素更新，但子元素尚未更新时，将调用此钩子。 componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。 unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。
然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了：
created - 新增！在元素的 attribute 或事件监听器被应用之前调用。 bind → beforeMount inserted → mounted beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。 update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。 componentUpdated → updated beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。 unbind -> unmounted
const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // 新增
beforeMount() {},
mounted() {},
beforeUpdate() {}, // 新增
updated() {},
beforeUnmount() {}, // 新增
unmounted() {}
}其他更多不同，可参见官网https://v3-migration.vuejs.org/zh/
猜你喜欢
- 【Vue】Antd Pro Vue的使用（十二） —— 菜单选中高亮显示问题
- Antd Pro Vue2这套框架的路由菜单有两个问题，1、页面迁移子页面，父页面对应的菜单未能选中高亮显示2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示网上查到的一些菜单配置都是新版本的，老版本并不支持这些方法，这里总结一下我的解决方法，如果大家有更好的解决方案，欢迎交流。一、解决第一个问题以我的菜单为例商品列表是菜单页面，添加编辑商品是隐藏菜单，我把他们做成了兄弟菜单，而不是子菜单/src/config/router.config.js配置如下然后再/src/layouts/Bas
- 【Vue】vue中的$set的作用
- $set 的作用是响应式地设置对象或数组的属性，确保更改被 vue.js 追踪和更新，从而触发视图重新渲染。其用法包括：vue.set(target, key, value)，适用于直接赋值不起作用、添加或删除对象或数组属性的情况。Vue.js 中 $set 的作用$set 是 Vue.js 中一个用于响应式地设置对象或数组属性的函数。它的主要作用是确保对对象或数组的更改能够被 Vue.js 追踪和更新，从而触发视图的重新渲染。如何使用 $set$set 函数有以下用法：Vue.set(targ
- 【Vue】Antd Pro Vue的使用（五）—— 多文件上传回显问题
- 需求： 多文件上传 ，上传的时候绑定fileList回显问题： 上传成功了，也拿到了后台返回的数据，但是onchang监听的时候，file的状态一直是uploading原因：onchange 只触发了一次解决： 使用单文件上传时@change事件会至少触发两次，一次file.status=uploading，最后一次要么是done或者error，handleUpload1(info) { if (info
- 【Vue】Vue 前后端分离部署方案
- 方案 1：Docker创建两个 Docker 容器，一个用于后端，一个用于前端。在后端容器中运行 API 代码。在前端容器中运行 Vue 应用程序并将其打包为静态文件（如 HTML、CSS 和 JS）。方案 2：Nginx 代理安装 Nginx Web 服务器作为反向代理。将后端 API 路由到 Nginx。Nginx 将前端静态文件提供给客户端。方案 3：Node Express使用 Node Express 作为后端框架，它可以将静态文件与 API 路由一起托管。在 Express 应用程序
- 【Vue】vue中destroy应用于什么场景
- vue 中 destroy 方法用于销毁 vue 实例，释放其资源，应用场景有：组件销毁；页面路由切换；手动释放资源；避免内存泄漏。Vue 中 destroy 的应用场景Vue 中的 destroy 方法用于销毁一个 Vue 实例，释放其占用的资源。以下是一些常见的 destroy 应用场景：1. 组件销毁当一个组件不再需要时，可以使用 destroy 方法将其销毁，例如：this.$destroy();登录后复制2. 页面路由切换当页面路由切换时，旧的 Vue 实例需要被销毁，以释放其资源。可
- 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（下）
- 文章目录📋前情回顾&前言🎯关于 el-table1️⃣获取每行对应的内容数据2️⃣行内数据判断处理（过滤）3️⃣对表格内容的索引🧩项目中延申使用🎯关于 el-pagination1️⃣显示总条数与分页展示2️⃣跳转页和页码样式3️⃣设置为中文🧩项目中延申使用📝最后📋前情回顾&前言上一篇文章（Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深
- 【Vue】Vue 单文件组件 (SFC) 规范
- 简介.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：
- 【Vue】Antd Pro Vue的使用（七） —— 年份选择组件配置
- ant design vue组件中没有现成的年份组件可使用，不过可通过配置来实现年份选择。先看实现效果：关闭效果：展开效果：配置如下：<a-date-picker mode="year" format="YYYY" :style="{width: '256px'}&quot
- 【Vue】Andt Pro Vue的使用（六） —— 描述列表a-descriptions设置label和content的样式
- 1、 a-descriptions设置label和content的样式在react组件中，可以直接设置labelStyle和contentStyle，来设置label和content的样式，但是在vue2的组件中，官方并没有给出响应的设置方法如下是我的订单详情页面label的宽度是自适应的，想要设置为固定的宽度，网上找了好多方法，都不生效直到遇到下面的方法https://blog.csdn.net/fifty_one/article/details/120219194 要使用/deep，
栏目分类全部>