展开菜单
首页 精品内容 本月促销 装机必备 Windows PDF教程 macOS软件 IOS软件 Android AI 专题
全部分类
系统应用 编程开发 硬件相关 软件教程 使用技巧 正版软件

当前位置：

首页 > 编程开发 > vue3中＜script setup＞和setup函数的区别是什么

vue3中＜script setup＞和setup函数的区别是什么

作者：若安舟已远 时间：2025-05-15 浏览：3

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

本文目录

      setup函数的写法中定义的变量和函数都需要return出来，不然无法正常使用。

      在＜script setup＞语法糖的写法

      
    import { ref } from 'vue'
    const num = ref(1)

      在＜script setup＞语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 

      setup函数使用外部文件时需要在setup函数中定义成一个方法才能正常使用。

      ＜script setup＞语法糖

      

import { test } from '@/utils/test.js'
import { ref } from 'vue'
const name = ref('huang')

      在＜script setup＞语法糖中无需再定义成一个方法，可以直接使用 。

      三、注册组件

      setup函数

      ＜script setup＞语法糖

      
import Hello from '@/components/HelloWorld'

      不需要在component 中注册了，可以直接使用。

      四、使用自定义指令

      setup函数

      ＜script setup＞语法糖

      

const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}

      全局注册的自定义指令将正常工作。本地的自定义指令在 

      ＜script setup＞语法糖

      
import { defineProps } from 'vue'
const props = defineProps({
  num: {
    type: Number,
    default: 1
  }
})

      六、子传父数据通信

      setup函数

      ＜script setup＞语法糖

      
import { defineProps, defineEmits } from 'vue'
const emit = defineEmits(['submit'])
const sendNum = () => {
  emit('submit', 1000)
}

      defineProps 和 defineEmits 都是只能在

      vue3中＜script setup＞和setup函数的区别是什么

       不使用defineExpose 

      
import { ref } from "vue";
const type = ref("语法糖");
const msg = ref("使用了defineExpose");

      vue3中＜script setup＞和setup函数的区别是什么

      八、与普通的 // 在 setup() 作用域中执行 (对每个实例皆如此)

      九、顶层的 await

      另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

      vue3中＜script setup＞和setup函数的区别是什么

       十、限制