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

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 都是只能在



 不使用defineExpose

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



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

九、顶层的 await

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



 十、限制