万万没想到,Vue3 的 setup 还能这么玩
前端Q
共 3084字,需浏览 7分钟
·
2021-11-28 19:01
点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
一、前言
昨天讲了什么是
组合式API
,\# 马上都2202年了你还不知道什么是Vue3的组合式API吗?[2]今天就来听我吹一吹vue3的setup
都能怎么用
借用官网一句话
setup
选项是一个接收props
和context
的函数
也就是说它的基本写法应该是这样的
export default{
name: 'test',
setup(props,context){
return {} // 这里返回的任何内容都可以用于组件的其余部分
}
// 组件的“其余部分”
}
复制代码
接收一个props
和context
函数并且将setup
内的内容通过return
暴露给组件的其余部分。
二、setup
注意点
由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法
由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this 修改成了 undefined
三、定义响应式数据
ref
reactive
vue3通过ref
reactive
来定义响应式数据
ref
我们用来将基本数据类型
定义为响应式数据,其本质是基于Object.defineProperty()
重新定义属性的方式来实现(ref更适合定义基本数据类型)
reactive
用来将引用类型
定义为响应式数据,其本质是基于Proxy
实现对象代理
基本数据类型(单类型):除Object。String、Number、boolean、null、undefined。 引用类型:object。里面包含的 function、Array、Date。
定义
复制代码
正常执行且输入
方式五
我们还可以这样写,这里我定义一个reactive
响应式对象,赋值给login
变量,这个响应式对象内有我们登录需要的参数
、验证
和方法
,这里我们全部放在login
这个响应式对象内然后用toRefs
及扩展运算符
暴露出去