学习script setup 语法糖
创始人
2024-06-03 16:19:08
0

首先讲解组合式API:setup()

setup 函数是一个组件选项,在创建组件之前执行,一旦 props 被解析,并作组合式 API 的入口。

BEFORE

setup 选项是一个接收 propscontext 的函数。此外,我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

NOW 

新的 setup 选项是在组件创建之前, props 被解析之后执行,是组合式 API 的入口。

在添加了setup的script标签中,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default,甚至是自定义指令也可以在我们的template中自动获得。

tip:在 setup 中应该避免使用 this,因为它不会找到组件实例。

要注意的是 "暴露给模板" 不同于 "暴露给外部

TIP:在使用 Vue 3 生命周期的情况下,整个组件相关的业务代码,都可以放在 setup 里执行。

因为在 setup 之后,其他的生命周期才会被启用.

对比Vue2、Vue3生命周期变化

组件生命周期

Vue 2 生命周期Vue 3 生命周期执行时间说明
beforeCreatesetup组件创建前执行
createdsetup组件创建后执行
beforeMountonBeforeMount组件挂载到节点上之前执行
mountedonMounted组件挂载完成后执行
beforeUpdateonBeforeUpdate组件更新之前执行
updatedonUpdated组件更新完成之后执行
beforeDestroyonBeforeUnmount组件卸载之前执行
destroyedonUnmounted组件卸载完成后执行
errorCapturedonErrorCaptured当捕获一个来自子孙组件的异常时激活钩子函数

可以看到 Vue 2 生命周期里的 beforeCreatecreated ,在 Vue 3 里已被 setup 替代。


script setup 语法糖

它是 Vue3 的一个新语法糖,在 setup 函数中,所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对之前的写法,语法更简单。

一、自动注册属性和方法无需返回,直接使用

1.

 

二.组件自动注册

在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。

示例

// 组件命名采用的是大驼峰,引入后不需要在注册
// 在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"

 

三.defineProps 和 defineEmits

不需要使用setup函数,那么子组件怎么接受父组件传递过来的值呢?props,emit怎么获取呢?

当当当当!defineProps

1.defineProps

defineProps ----> [用来接收父组件传来的 props]

通过defineProps指定当前 props 类型,获得上下文的props对象。

示例:

父组件传递参数:


import TestCom from "../components/TestCom.vue"
let msg='今天是2023年3月14日'

子组件接受参数:

import {defineProps} from 'vue'defineProps({info:{type:String,default:'----'},time:{type:String,default:'0分钟'},
})

解决了父组件向子组件传值,那么子组件怎么向父组件抛出事件?

2.defineEmits

定义 emit

defineEmit ----> [子组件向父组件事件传递]

使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit。

代码示列

父子组件通信

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

父组件

//父组件

 子组件

//子组件
  • 子组件通过 defineProps 接收父组件传过来的数据
  • 子组件通过 defineEmits 定义事件发送信息给父组件

四.useSlots()useAttrs()

获取 slots 和 attrs

  1. useAttrs:这是用来获取 attrs 数据,但是这和 vue2 不同,里面包含了 class属性方法

const attrs = useAttrs();
// 新

五.defineExpose API

defineExpose ----> [组件暴露出自己的属性]

传统的写法,我们可以在父组件中,通过 ref 实例的方式去访问子组件的内容,但在 script setup 中,该方法就不能用了,setup 相当于是一个闭包,除了内部的 template模板,谁都不能访问内部的数据和方法。

父组件

//父组件

六.新增指令 v-memo

v-memod会记住一个模板的子树,元素和组件上都可以使用。

该指令接收一个固定长度的数组作为依赖值进行“记忆比对”。如果数组中的每个值都和上次渲染的时候相同,则整个子树的更新会被跳过。

即使是虚拟 DOM 的 VNode 创建也将被跳过,因为子树的记忆副本可以被重用。

因此渲染的速度会非常的快。

tip:正确地声明记忆数组是很重要。

开发者有责任指定正确的依赖数组,以避免必要的更新被跳过。

{{ item.name   }}

v-memod的指令使用较少,它的作用是:缓存模板中的一部分数据。

只创建一次,以后就不会再更新了。也就是说用内存换取时间。


七.style v-bind 

例:style v-bindspan变成红色

import { reactive } from 'vue'const state = reactive({color: 'red'})

span {/* 使用v-bind绑定state中的变量 */color: v-bind('state.color');}  

八.定义组件其他配置

配置项的缺失,有时候我们需要更改组件选项,在setup中我们目前是无法做到的。我们需要在上方再引入一个 script,在上方写入对应的 export即可,需要单开一个 script。

注意:Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下,不需要明确的 name 声明。唯一需要的情况是当你需要 包含或排除或直接检查组件的选项时,你需要这个名字。


 

参考文章:https://juejin.cn/post/7209872710155206717 

Vue3 script setup 语法糖-阿里云开发者社区 (aliyun.com)

相关内容

热门资讯

画画小课堂·学画简笔画230例... 画画小课堂·学画简笔画230例的目录可爱动物水族大眼睛的金鱼奇迹笑哈哈恶狠狠的鲨鱼顶球的海狮调皮的海...
心灵鸡汤经典语录 心灵鸡汤经典... 心灵鸡汤经典语录 心灵鸡汤经典语录短句1、有一个人任何时候都不会背弃你,这个人就是你自己。谁不虚伪,...
征途现在还能开箱子吗 征途现在还能开箱子吗现在不能,以后也不能。要是能开箱子的话。巨人怎么养活自己啊现在还能开了吧
微信官宣!聊天记录有救了 朋友们微信存储空间告急怎么办?那100多G的聊天记录是小编我最丰富的社会阅历了终!于!微信迎来了重大...
创新药又有新药获批,创新药ET... (转自:ETF万亿指数)创新药ETF国泰(517110)近期反复活跃,继昨天大涨2.80%之后,今天...
“2025年阿拉木图市‘旅游日... 来源:环球网 近日,由哈萨克斯坦阿拉木图市旅游管理局主办的“2025年阿拉木图市‘旅游日’”活动在北...
三地携手打造数字经济协同创新共... 转自:河北新闻网三地携手打造数字经济协同创新共同体京津冀数字经济产业链加速“织网”昨天,2025全球...
路易威登韩国遭黑客入侵 奢侈品... 全球最大奢侈品集团LVMH(LVMUY.US)旗下核心品牌路易威登在韩分支机构近日遭遇网络攻击,导致...
请问成长是一种什么? 请问成长是一种什么?我要写作文的,拜托大将帮我想一的题目:成长是一种( )。成长是一种感受、责任...
7万亿服务零售市场:美团的线上...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 毫无疑问,中国经济的...