vue3的setup还能这么用

前端大神之路

共 3089字,需浏览 7分钟

 ·

2021-11-29 16:25

本文适合使用vue3开发项目以及对vue3感兴趣的小伙伴阅读。

欢迎关注前端早茶,与广东靓仔携手共同进阶~

一、前言

vue3文档地址:

https://v3.cn.vuejs.org/

本文来说一说vue3的setup都能怎么用

借用官网一句话

setup 选项是一个接收 props 和 context 的函数

也就是说它的基本写法应该是这样的

export default{
    name'test',
    setup(props,context){

     return {}   // 这里返回的任何内容都可以用于组件的其余部分
    }
    // 组件的“其余部分”
}

接收一个propscontext函数并且将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扩展运算符暴露出去