用上Vue3,你真的变了吗?

简介: 10月更文挑战第6天

前言
Vue3已经发布很长一段时间了,虽然早就用上了框架,但是很多人依旧保持着Vue2的思维习惯,导致大家在实际开发中并没有感觉到提升,属实是新瓶装旧酒。我们应该意识到这并不仅仅是一个数字大版本的迭代,而是一次全新的开发体验。
让我们一起看看在使用Vue3开发时,应该在哪些地方做出改变?
正文
使用 通过export default导出一个对象,内部的data,methods,watch都可以使用,this依然可以保留,并指向vue,setup中如果想用props、emit等,通过参数传递。在setup中可以直接使用新写法,组件通过components进行引入。可以极大的还原Vue2的用法,如果团队的组件库是使用Vue2写的,可以用很小的成本就改造完成。 为了更好的类型推导,vue还提供了defineComponent方法。 ts 代码解读复制代码export default defineComponent({ components: { CompA }, setup (props, context) { // do something }, }) 但其实官方并不推荐这种写法,这种写法仅仅是为了兼容旧代码,这也是你感觉Vue3没有提升的很大一方面因素。就像是iPhone更新,当外观有变化时你才会觉得是大更新,系统升级个IOS18,你觉得卵用没用。所以更好的方式应该是
{ { title }}

你会发现有很多核心的变化,首先不再需要export导出了,标签对内直接就是一个setup环境。ref可以直接写,也没有了methods,你写一个就是一个方法,直接就可以绑定。为什么呢?官方不是说所有的值都需要return出去吗?放心,@vue/compiler-sfc帮你解决了这些烦恼。
其次这种写法是去this化的,比如以往我们调用router都是this.$router这么使用,而现在你需要引入useRouter,可以更好的分辨来源。对ts也更友好。

目录
相关文章
|
5天前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
138 58
|
2天前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
103 68
|
6天前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
27 7
|
1天前
|
JavaScript 前端开发 算法
对比一下Vue2 和 Vue3?—— 8个方面给你答案
本文介绍了 Vue 和 React 的起源、核心思想、表现形式、API 差异、社区差异、升级方向、响应式原理、Diff 算法、事件机制,并进行了总结。Vue 以其渐进式框架设计和简洁性著称,而 React 则强调单向数据流和灵活性。两者均支持组件化开发和虚拟 DOM,适用于不同的开发场景。
10 0
对比一下Vue2 和 Vue3?—— 8个方面给你答案
|
2天前
|
JavaScript API
Vue3实现面板分割
Vue3实现面板分割
10 1
|
8天前
|
前端开发 JavaScript API
Vue3商品SKU多规格编辑组件
Vue3商品SKU多规格编辑组件
28 5
|
5天前
Vue3 使用mapState
【10月更文挑战第8天】
7 1
|
5天前
|
缓存 JavaScript 前端开发
对比一下Vue2和Vue3?
本文首发于微信公众号“前端徐徐”,详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异,帮助读者全面了解两者的不同之处。
35 0
对比一下Vue2和Vue3?
|
6天前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
22 1
|
7天前
|
存储 消息中间件 JavaScript
Vue3 多种组件通讯方法
【10月更文挑战第6天】