首页 精品内容 本月促销 HOT 装机必备 HOT Windows macOS软件 IOS软件 Android AI PDF教程 专题

当前位置：

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

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

作者：若安舟已远 时间：2024-04-30 来源：互联网 浏览：0

是在单文件组件(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函数的区别是什么

     十、限制