type
status
date
slug
summary
tags
category
icon
password
Vue3
的发布已经差不多快一年了,笔者也是在中途跟了波热潮,学习了一下Vue3
的新特性,但一直没有用于工作开发。好在这家公司比较鼓励新技术的使用,笔者也是在不久前将Vue3
投入到工作中,发现还是很丝滑的😎 在此记录一下笔者的所学所用,持续更新吧...Vue3 与 Vue2
Vue2 结构
熟悉
Vue2
的读者应该知道,我们一般会在data
中定义数据,在methods
中声明方法,通过this
调用需要的数据和方法。想必大家和笔者一样也感受到了,当
.vue
文件中功能复杂、代码过长时,我们需要在template
、data
、methods
之间来回切换,甚是烦躁 😤当然,还不止于此!不知大家是否在工作中用过
mixins
。不可否认,mixins
有它的优点和好处,但不足也很明显:- 命名易冲突
- 未知的数据来源,调试起来很酸爽 😵
- ……
大概是基于以上的问题,
Vue3
诞生了 👏 推出了Composition API
Vue3 诞生
Vue3
推出的Composition API
,不仅可以把零散的逻辑组合在一起,还能将独立的功能逻辑拆分成单独的文件。下面,我就来隆重的介绍它setup
这是
Vue3
新增的一个特性,是作为Composition API
的入口。结构如下:setup
执行的时机,网上说法不一。不过通过笔者的测试发现,setup
执行的时机在beforeCreate生命周期
之前,读者也可通过下方代码进行自测:🤔setup
可以接收两个参数props
和context
,如上方代码。我们简单来说说这两个属性:props
:父子组件之间通过prop
所传的值。直接上代码:
那么,通过
setup
中的props
参数就可以拿到上面传入的num
和obj
属性,从而进行相关的逻辑操作Tips:
props
不能使用 ES6 解构,这样解构出的数据会失去响应式。如果我们既想要解构,又想要其保持响应式,怎么办?别怕,Vue3
提出了toRefs
函数,我们会在后面学习它context
:可替代Vue2
中的this
我们在
Vue2
中,会频繁使用到this
。但是,在Vue3
中,不能使用this
。所以,context
中提供了最常用的几个属性:emit
、slot
,使用如下:ref、reactive、toRefs
在
Vue2
中,我们通常把数据定义在data
中,而且我们知道,定义在data
中的数据通常是响应式的。那么,我们在Vue3
中该怎么定义数据呢?ref
、reactive
由此而生。一般来说,ref
定义js基础类型的双向绑定;而reactive
则定义对象类型的双向绑定。用法如下:相信读者们也发现了,当我们用
reactive
定义了对象类型,同时需要在模版中使用时,都需要data.某个属性
,数据量大的时候还是蛮繁琐的。同上文提到的props
一样,我们不能直接解构,不然会失去响应式。因此,Vue3
提出了toRefs
函数。通过toRefs
将reactive
定义的对象类型里的属性全部转为ref
定义的基础类型。上述代码可做如下修改:computed
直接上代码,感受一下
Vue3
中的computed
filters
在
vue2
中有过滤器filters
,可以很方便的对一些数据进行简单的二次操作,如时间格式化等。但在vue3
中,vue团队移除了过滤器的概念,并用computed
去代替过滤器filters
的功能watch
- 监听
ref
定义的数据
- 监听
reactive
定义的数据
Vue3
中依旧保留了deep
、immediate
关键字,如下代码生命周期
Vue2
和Vue3
的生命周期还是有点区别的,直接将官网的说明拿过来 🤲![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F473f7782-1890-453e-b978-d4ffce4e4314%2FUntitled.png?table=block&id=aec235a2-cb45-40ef-9f63-54c0014da2c2&t=aec235a2-cb45-40ef-9f63-54c0014da2c2&width=980&cache=v2)
结语
Vue3
中的特性就先介绍到这边。除了上述介绍的特性外,Vue3
中还有很多的新特性,如watchEffect
、自定义Hooks
、Teleport
等。由于笔者未频繁使用到这些特性,就先不做记录,之后使用到了或是学习了在陆续更新吧~- 作者:Leeson
- 链接: /article/vue-1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。