vue3中<script setup> 和 setup函数的区别

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

在<script setup>语法糖的写法

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

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

<script setup>语法糖


 

在<script setup>语法糖中无需再定义成一个方法,可以直接使用 。

三、注册组件

setup函数

<script setup>语法糖

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

四、使用自定义指令

setup函数


<script setup>语法糖


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

<script setup>语法糖

六、子传父数据通信

setup函数

<script setup>语法糖

defineProps 和 defineEmits 都是只能在

vue3中<script setup> 和 setup函数的区别_第1张图片

 不使用defineExpose

 vue3中<script setup> 和 setup函数的区别_第2张图片

八、与普通的

九、顶层的 await

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

vue3中<script setup> 和 setup函数的区别_第3张图片

 十、限制

你可能感兴趣的:(前端,vuejs,前端,vue.js,javascript)