vue3和vue2区别记录

最新推荐文章于 2025-09-02 19:29:38 发布
原创 最新推荐文章于 2025-09-02 19:29:38 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

​​​​​​​

目录

​​​​​​​​​​​​​​

Vue2和vue3的区别

Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

 Vue3挂载方法和变量

一些uniui的组件不能在uniapp中的vue3使用

uniniapp中vue2和vue3的双向绑定数据区别

  1. Vue2和vue3的区别

① vue2使用的是webpack形式去构建项目

webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了可以开始干了

②vue3使用vite构建项目

先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，Dynamic import（动态导入）code split point（代码分割）

最大的好处和区别就是为了让项目中一些代码文件多了以后去保存更新数据时更快能够看到实际效果，也就是所谓的（热更新）

  1. Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

    1. Vue2挂载方法和变量

import Vue from "vue";

import Echarts from "echarts";

Vue.prototype.$echarts = Echarts;

new Vue({

  router,

  store,

  render: (h) => h(App),

}).$mount("#app");

图 1‑1  vue2代码

在页面使用的时候：

this.$echarts.xxx()

图 1‑2 vue2在页面使用

  1.  Vue3挂载方法和变量

图 1‑3  vue3代码

在页面中的使用和vue2相同

this.$echarts.xxx()

图 1‑4  vue3代码

  1. 一些uniui的组件不能在uniapp中的vue3使用

组件名

替代组件（uview）

uni-file-picker(上传文件)

u-upload

uni-rate（评分）

u-rate

uni-popup（弹窗）

u-popup（与uni-popup的使用方式不相同）

uni-list-item（vue3可以不用添加link,点击事件可以跳转，添加会报错。vue2必须添加link属性，不然点击事件不能跳转）

uniniapp中vue2和vue3的双向绑定数据区别

在vue3中任何输入框组件中v-model都不能实现数据双向绑定，得使用@input属性才能实时获取当前输入数据。

例如：

@input=”value = $event

  1. Uniapp中vue3 v-for和v-if一起用的变化
    1. 作用：

v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点

v-for指令 是基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的

  1. 优先级

Vue2中v-for和v-if是可以一起用的 因为v-for的优先级比v-if的高

Vue3中不能这样使用 但是有不想在加一个结构使自己的代码更复杂，可以在外面套一层template

图 1‑5  图

  1. 2 注意事项
  2. 永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
  3. 如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环
  4. 最好这样写：

图 1‑6  图

额于大梦
关注
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
总的来说，Vue2和Vue3在数据响应式方面的主要区别在于实现机制和性能优化，Vue3提供了更现代、更高效的方式来实现数据响应，同时也带来了更简洁的API。对于开发者来说，理解这两种机制有助于更好地利用Vue框架构建高...
vue3-autocounter-docs:这是使用Vue 3和TypeScript创建的SPA，用于记录vue3-autocounter组件
03-26
Vue 3 Autocounter Docs 是一个开源项目，它利用了Vue 3框架和TypeScript的强大功能，构建了一个单页应用程序（SPA），专门用于记录和展示`vue3-autocounter`组件的相关文档和示例。这个项目的目的是为了帮助开发者...
Vue3和vue2的区别？
a190404的博客
08-11 608
了解vue3
快速搭建uni-app项目，vue2、Vue3与图鸟UI组件封装
qq_38290010的博客
05-26 1004
这个uni-app组件库和相关社区资源为开发者提供了一个非常宝贵的资源平台。无论您是uni-app的新手还是经验丰富的开发者，都可以在这里找到所需的技术支持和交流机会。我们期待您的加入，并希望与您共同构建一个更加活跃、更有价值的uni-app社区！
vue2 跟 vue3 对比总结
最新发布
越努力，越幸运！
09-02 1865
/ vue2new Vue({})// vue3特性Vue2Vue3API 设计状态管理VuexPinia构建工具WebpackVite响应式系统ProxyTypeScript 支持有限完全支持性能表现一般提升 30-50%包体积较大更小开发体验基础优秀学习成本低中等维护性一般更好。
uni-app 和 Vue 的区别
单飞吧的博客
10-15 1万+
组件/标签的变化 以前是html标签，现在是小程序标签。 div 改成 view span、font 改成 text a 改成 navigator router-link img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picker iframe 改成 web-view ul、li没有了，都用view替代 audio 不再推
vue2和vue3的区别
ygbwan的博客
08-06 783
Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。三、Vue 3 有 createApp()，而 Vue 2 的是 new Vue()Vue2 与vue3 最大的区别是vue2使用选项类型api，对比vue3合成型ap。Vue 3 的 Template 支持多个根标签，Vue 2 不支持。四、v-model代替以前的v-model和.sync。一、vue2和vue3双向数据绑定原理发生了改变。的双向数据绑定是利用ES5 的一个。的 ProxyAPI 对数据代理。.
Vue2和Vue3的区别整理
qq_65597930的博客
11-12 1436
Vue 3通过引入 Composition API、优化性能、增强 TypeScript 支持等特性，使得开发者在编写和维护复杂应用时更加高效和灵活。虽然 Vue 2 的 Options API 仍然可用，但Vue 3的新特性无疑为现代前端开发提供了更多的可能性。
前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别
CoderHing的博客~
12-22 1万+
🖥️ 前端经典面试题 吊打面试官 专栏：Vue2和Vue3的区别🧑‍💼 个人简介：一个不甘平庸的平凡人🍬🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️。
精选资源
vue3 + element-ui + vue router + axios
12-29
然而，需要注意的是，虽然Vue 3与Vue 2在API和内部机制上有所不同，所以在使用Element UI这类为Vue 2设计的组件库时，可能需要额外的调整和配置。开发者在选择技术栈时，应充分考虑项目需求和各技术组件之间的兼容性...
精选资源
vuejs-logger:为Vue.js提供可自定义的日志记录功能。 兼容Vue2
05-25
与Vue2兼容。 目录 执照 演示版 @ https://codepen.io/justinkames/pen/BwGOVQ 介绍 vuejs-logger是一个工具，可为Vue应用程序启用可配置的日志记录。 功能包括： 基于所选日志级别的输出限制。 自动将JSON....
vue2和vue3的差异整理（轻松过度到vue3）
Yi_qian的博客
06-12 1万+
随着2023年末vue官方宣布vue2日后不在更新，vue3将成为日后开发框架的新首选项。特此记录下vue2与vue3中的语法，常用插件等使用差异
Vue3 和 Vue2 的区别？
weixin_42381609的博客
08-14 984
因为数据要放在data里面，方法要放在methods里面，计算属性要放在computed里面，监听部分要放在watch里面。操作功能A的代码时，只需要在这紧挨着的100行里面查找就可以了，其他700行不用管，整体方便多了。Vue2：1）根组件的文件顺序由上至下依次为：模板template、脚本script 、样式css。选项式 API，实现一个功能涉及的数据、方法、计算属性，分散在不同的地方。组合式API，实现一个功能涉及的数据、方法、计算属性，都放在同一个的地方。
vue3和vue2的区别
weixin_50379372的博客
06-08 1019
vue2和vue3的区别
Vue3和Vue2的区别
热门推荐
大香蕉的博客
02-17 2万+
Vue3和Vue2的区别 vue3和vue2生命周期对比
vue3 router和vue2 router的区别
06-20
<think>我们正在比较Vue3的vue-router和Vue2的vue-router。根据提供的引用，我们可以总结出以下主要区别和功能变更：1.**安装方式**:-Vue2:通过`Vue.use(Router)`来安装路由。-Vue3:由于Vue3使用createApp创建应用实例，因此使用`app.use(router)`来安装路由。2.**路由模式**:-两者都支持三种路由模式：hash、history和abstract。但在Vue3中，创建路由实例时，模式（mode）选项被替换为历史（history）选项，并指定对应的历史记录创建函数。-Vue2:`newRouter({mode:&#39;history&#39;})`-Vue3:`createRouter({history:createWebHistory()})`3.**组合式API的使用**:-在Vue2中，我们可以在组件内通过`this.$router`和`this.$route`访问路由实例和当前路由对象。-在Vue3的组合式API（setup函数）中，由于没有`this`，因此提供了两个新的函数`useRouter`和`useRoute`来分别获取路由实例和当前路由对象。4.**路由实例创建**:-Vue2:通过`newRouter({...})`创建路由实例。-Vue3:使用`createRouter({...})`函数创建路由实例。5.**路由定义**:-在Vue3中，路由定义中的`component`属性需要明确导入组件并传递，而不是像Vue2中那样可以传递一个异步组件函数（除非使用`defineAsyncComponent`）。另外，Vue3支持了`defineAsyncComponent`来定义异步组件，但在路由配置中用法类似。6.**其他API变更**:-Vue3的vue-router删除了一些过时的API，例如`<router-link>`的`append`、`tag`等属性，同时增加了一些新特性，如路由懒加载的改进等。下面我们通过代码示例来展示这些差异：###Vue2Router示例```javascriptimportVuefrom&#39;vue&#39;importRouterfrom&#39;vue-router&#39;importHomefrom&#39;./views/Home.vue&#39;Vue.use(Router)constroutes=[{path:&#39;/&#39;,name:&#39;Home&#39;,component:Home},{path:&#39;/about&#39;,name:&#39;About&#39;,component:()=>import(&#39;./views/About.vue&#39;)//异步组件}]constrouter=newRouter({mode:&#39;history&#39;,base:process.env.BASE_URL,routes})exportdefaultrouter```###Vue3Router示例```javascriptimport{createRouter,createWebHistory}from&#39;vue-router&#39;importHomefrom&#39;../views/Home.vue&#39;constroutes=[{path:&#39;/&#39;,name:&#39;Home&#39;,component:Home},{path:&#39;/about&#39;,name:&#39;About&#39;,//异步组件的导入方式（Vue3中可以使用defineAsyncComponent，但这里直接使用动态导入即可）component:()=>import(&#39;../views/About.vue&#39;)}]constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes})exportdefaultrouter```在Vue3组件中使用路由：```javascriptimport{useRouter,useRoute}from&#39;vue-router&#39;exportdefault{setup(){constrouter=useRouter()constroute=useRoute()functiongoToAbout(){router.push({name:&#39;About&#39;})}return{goToAbout}}}```###总结Vue3Router的主要变更包括：-创建路由实例的方式从`newRouter()`改为`createRouter()`。-路由模式配置从`mode`选项改为使用`history`选项，并调用对应的创建函数（如`createWebHistory`、`createWebHashHistory`、`createMemoryHistory`）。-在组合式API中，使用`useRouter`和`useRoute`替代`this.$router`和`this.$route`。-一些API的移除和新增，例如`<router-link>`的属性变化。这些变更使得VueRouter与Vue3的响应式系统和组合式API更好地集成。§§相关问题§§1.Vue3Router中如何实现路由守卫？2.Vue3Router支持哪些新的特性？3.在Vue3中如何处理路由懒加载？4.Vue3Router与Vuex的集成有什么变化？</think>### Vue 3 Router 与 Vue 2 Router 的主要区别及功能变更 #### 1. **安装方式变更** - **Vue 2**：通过 `Vue.use()` 全局安装 ```javascript import Vue from &#39;vue&#39; import Router from &#39;vue-router&#39; Vue.use(Router) // 全局注入 ``` - **Vue 3**：使用工厂函数创建路由实例 ```javascript import { createRouter } from &#39;vue-router&#39; const router = createRouter({ /* 配置 */ }) // 独立实例 ``` #### 2. **路由模式定义变化** - **Vue 2**：通过 `mode` 字段指定 ```javascript const router = new Router({ mode: &#39;history&#39; }) ``` - **Vue 3**：使用专用函数创建历史记录模式 ```javascript import { createWebHistory } from &#39;vue-router&#39; const router = createRouter({ history: createWebHistory(), // 或 createWebHashHistory() }) ``` 三种模式对应函数[^3]： - `createWebHistory()`：HTML5 History 模式 - `createWebHashHistory()`：Hash 模式 - `createMemoryHistory()`：Abstract 模式（SSR） #### 3. **API 访问方式变更** - **Vue 2**：通过 `this.$router`/`this.$route` 访问 ```javascript methods: { goHome() { this.$router.push(&#39;/&#39;) } } ``` - **Vue 3**：使用组合式 API 函数 `useRouter()`/`useRoute()`[^2] ```javascript import { useRouter, useRoute } from &#39;vue-router&#39; export default { setup() { const router = useRouter() const route = useRoute() const goHome = () => router.push(&#39;/&#39;) return { goHome } } } ``` #### 4. **路由配置语法优化** - **路由定义**：Vue 3 移除了部分过时属性（如 `linkExactActiveClass` 需显式声明） - **动态路由**：参数匹配规则更严格（需使用 `:param` 语法） - **嵌套路由**：子路由的 `children` 字段用法不变，但需配合 `<router-view>` 层级 #### 5. **TypeScript 支持增强** Vue 3 Router 提供完整的类型定义： - 路由参数自动类型推断（`route.params.id` 可识别为 `string`） - 路由配置对象类型检查 - 导航守卫参数类型安全 #### 6. **性能改进** - 路由匹配算法优化，减少渲染开销 - 懒加载组件与 Vue 3 的 `defineAsyncComponent` 深度集成 ```javascript // Vue 3 路由懒加载示例 { path: &#39;/about&#39;, component: () => import(&#39;./About.vue&#39;) } ``` #### 7. **移除的功能** - 废弃 `<router-link>` 的 `tag` 属性（改用 `v-slot` API） - 移除 `append` 属性（需手动处理路径） - 不再支持隐式传递路由上下文（需显式使用 `useRoute`） --- ### 迁移示例对比 **Vue 2 路由配置**： ```javascript const router = new Router({ mode: &#39;history&#39;, routes: [{ path: &#39;/&#39;, component: Home }] }) ``` **Vue 3 等效配置**： ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39; const router = createRouter({ history: createWebHistory(), routes: [{ path: &#39;/&#39;, component: Home }] }) ``` --- ### 总结关键差异 | **特性** | Vue 2 Router | Vue 3 Router | |-------------------|----------------------------------|---------------------------------------| | 初始化方式 | `new Router()` + `Vue.use()` | `createRouter()` 工厂函数 | | 路由模式 | `mode: &#39;history&#39;` | `history: createWebHistory()` | | API 访问 | `this.$router` | `useRouter()` 组合式函数 | | TypeScript 支持 | 需额外类型扩展 | 内置完整类型定义 | | 路由守卫 | 全局/局部守卫相同 | 守卫参数增加 `return` 类型约束 | | `<router-link>` | 支持 `tag` 属性 | 改用 `v-slot` 定制渲染 |
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值