vue3 更新的setup语法糖

梅花十三儿

于 2022-06-20 22:12:30 发布

阅读量407

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/125381674

版权

本文介绍了Vue3的最新更新——setup语法糖，它带来了组件自动注册、无需return的属性和方法以及自动设置组件name等便利特性。同时，文章详细讲解了在使用setup时如何与选项API结合，并提醒在使用ref获取子组件实例时需要注意的数据导出方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3最近更新了一个setup语法糖，这两天才看到，使用起来雀食很甜，特发个帖子记录下

语法糖用法：

// 将 `setup` attribute 添加到 `<script>` 代码块上
// 里面的代码会被编译成组件 `setup()` 函数的内容
// 就是这么简单明了
<script setup>

</script>

语法糖带来的体验

一、组件自动注册

// 无需使用components，引入即注册，起飞有没有

<script setup>
    import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

二、属性及方法无需return

// 当使用 `<script setup>` 的时候，任何在 `<script setup>` 声明的顶层的绑定
// (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用

import { ref } from 'vue'
<script setup>
// 变量
let msg = ref('Hello!')

// 函数
function log() {
  msg.value = "World!";
  console.log(msg)

最低0.47元/天解锁文章