vue3的setup还能这么用
本文适合使用vue3开发项目以及对vue3感兴趣的小伙伴阅读。
欢迎关注前端早茶，与广东靓仔携手共同进阶～
一、前言
vue3文档地址：
https://v3.cn.vuejs.org/
本文来说一说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及扩展运算符暴露出去