用上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也更友好。

目录
相关文章
|
16天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
19天前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
28 4
vue3知识点:provide 与 inject
|
19天前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
24 1
vue3知识点:readonly 与 shallowReadonly
|
13天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
30 7
|
14天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
36 3
|
13天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
33 1
|
13天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
34 1
|
15天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
16天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
19天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
27 5