首页 > 资讯 > 前端开发 > JavaScript >vue3中＜script setup＞和 setup函数的区别对比

851

分享到

vue3中＜script setup＞和 setup函数的区别对比

vue3＜script setup＞和 setup函数区别 vue3＜script setup＞ 2023-05-18 06:05:31 851人浏览八月长安

摘要

目录一、基本语法setup函数的写法在＜script setup＞语法糖的写法二、使用外部文件区别setup函数＜script setup＞语法糖三、注册组件setup函数＜scri

更少的样板内容，更简洁的代码。
能够使用纯 typescript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

以上是vue3官网对<script setup>的说明，其实＜script setup＞就是 setup函数的一个语法糖。

一、基本语法

setup函数的写法

<script>
import { ref } from 'Vue'
export default {
  setup () {
    const num = ref(1);
    return { num }
  }
}
</script>

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

在＜script setup＞语法糖的写法

<script setup>
    import { ref } from 'vue'
    const num = ref(1)
</script>

在＜script setup＞语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

二、使用外部文件区别

setup函数

<template>
  <div>
    <h2> {{test(name)}}</h2>
  </div>
</template>
<script>
import { ref } from 'vue'
import { test } from '@/utils/test.js'
export default {
  setup () {
    const name = ref('huang')
    const testName = test 
    return { name, testName }
  }
}
</script>

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

＜script setup＞语法糖

<template>
  <div>
    <h2>{{ test(name) }}</h2>
  </div>
</template>
<script setup>
import { test } from '@/utils/test.js'
import { ref } from 'vue'
const name = ref('huang')
</script>

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

三、注册组件

setup函数

<script>
import Hello from '@/components/HelloWorld'
export default {
  components: {
    Hello
  }
}
</script>

＜script setup＞语法糖

<script setup>
import Hello from '@/components/HelloWorld'
</script>

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

四、使用自定义指令

setup函数

<template>
    <h1 v-onceClick>使用了setup函数</h1>
</template>
<script>
export default {
  directives: {
    onceClick: {
      mounted (el, binding, vnode) {
        console.log(el)
      }
    }
  },
}
</script>

＜script setup＞语法糖

<template>
    <h1 v-my-Directive>使用了script setup</h1>
</template>
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}
</script>

全局注册的自定义指令将正常工作。本地的自定义指令在 <script setup> 中不需要显式注册，但他们必须遵循 vNameOfDirective 这样的命名规范

五、父传子数据通信

<Com :num="100"></Com>

setup函数

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  setup (props) {
    console.log(props)
  }
}
</script>

＜script setup＞语法糖

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  num: {
    type: Number,
    default: 1
  }
})
</script>

六、子传父数据通信

setup函数

<script>
export default {
  setup (props, context) {
    const sendNum = () => {
      context.emit('sendNum', 200)
    }
    return { sendNum }
  }
}
</script>

＜script setup＞语法糖

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

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。

defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

七、defineExpose和expose

使用setup函数定义的组件的expose是默认开启的，会将函数内定义的实例变量、方法全部暴露出去。而使用＜script setup＞的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性，若不使用 defineExpose 则获取不到当前引用的组件实例变量、方法。

使用了defineExpose

<script setup>
import { ref } from "vue";
const type = ref("<script setup>语法糖");
const msg = ref("使用了defineExpose");
defineExpose({
  type,
  msg,
});
</script>

不使用defineExpose

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

八、与普通的<script> 一起使用

声明无法在 <script setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项。
声明模块的具名导出 (named exports)。
运行只需要在模块作用域执行一次的副作用，或是创建单例对象

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()
// 声明额外的选项
export default {
  name:'header',
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

九、顶层的 await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<script setup>
const post = await fetch('https://api.com').then((r) => r.JSON())
</script>

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

十、限制<script setup> 使用src属性

由于模块执行语义的差异，<script setup> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因此，<script setup> 不能和 src attribute 一起使用。

到此这篇关于vue3中＜script setup＞和 setup函数的区别的文章就介绍到这了,更多相关vue3＜script setup＞和 setup函数区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue3中＜script setup＞和 setup函数的区别对比

本文链接: https://www.lsjlt.com/news/211710.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue3中＜script setup＞和 setup函数的区别对比

目录一、基本语法setup函数的写法在＜script setup＞语法糖的写法二、使用外部文件区别setup函数＜script setup＞语法糖三、注册组件setup函数＜scri...

99+

2023-05-18

vue3＜script setup＞和 setup函数区别 vue3＜script setup＞
vue3中setup-script的应用实例

目录新特性的产生背景内部变量子父级传值总结新特性的产生背景在了解它怎么用之前，可以先了解一下它被推出的一些背景，可以帮助你对比开发体验上的异同点，以及了解为什么会有这一章节里面的新...

99+

2024-04-02
vue3中setup()和reactive()函数怎么使用

<template> <ul> <li v-for="(item, index) in arr" :key="item" @click="...

99+

2023-05-19

Vue3 setup() reactive()
一文详解Vue3中的script setup语法糖

在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用这里强调一句 “暴露给模板，跟暴露给外部不是一回事”TIP：说的通俗一点，就是在使用 Vue 3 生命...

99+

2022-11-22

前端 Vue.js
Vue3中的script setup语法糖怎么使用

这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获，下面我们一起来看看吧。scr...

99+

2023-07-04
详解vue3中setUp和reactive函数的用法

1 setUp的执行时机我们都知道，现在vue3是可以正常去使用methods的。但是我们却不可以在setUp中去调用methods中的方法。为什么了？？？我们先了解一下下...

99+

2024-04-02
vue3中的setup函数如何使用

这篇文章主要讲解了“vue3中的setup函数如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3中的setup函数如何使用”吧！概述一、初识setup函数 ...

99+

2023-06-30
关于vue3中setup函数的使用

概述一、初识setup函数组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使...

99+

2024-04-02
Vue3中SetUp函数的props和context参数怎么用

第一个参数props:props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接...

99+

2023-05-22

Vue3 setup props
Vue3中SetUp函数的参数props、context详解

1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象，包含父组件传递给子组件的所有数据。在子组...

99+

2024-04-02
详解Vue3中setup函数的使用教程

目录vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量setup 创...

99+

2024-04-02
vue3中setup函数的参数props和context怎么配置

这篇文章主要介绍了vue3中setup函数的参数props和context怎么配置的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中setup函数的参数props和con...

99+

2024-04-02
详解Vue3中的setup语法糖、computed函数、watch函数

computed函数在上篇文章中我们学了两个组合式API分别是 ref 和 reactive，现在呢我们学习cmputed函数，相信大家一定知道他即使我们的计算数据定义函数，之前呢是 computed 选项，现在是computed函数；我们...

99+

2023-05-14

setup computed watch vue3
vue3组合式API中setup()概念和reactive()函数的用法

目录⭐一、组合式API对比vue2项目结构在vue2当中在vue3当中⭐二、setup()函数的使用2.1setup()函数的基础概念2.2.setup()初体验2.3.reacti...

99+

2023-05-14

vue3 setup()与reactive()使用 vue3组合式API vue3 setup()
Vue3中的setup语法糖、computed函数、watch函数详解

目录写在前面 setup 语法糖 computed函数 watch 函数写在最后写在前面专栏介绍：凉哥作为 Vue 的忠实粉丝输出过大量的 Vue 文章，应粉丝要求开始更新...

99+

2023-03-01

Vue3 setup语法糖 Vue3 computed函数 Vue3 watch函数
Vue3中的setup语法糖、computed函数、watch函数如何用

computed函数computed 函数的使用：其实我们什么情况下会使用计算属性呢，那一定是通过依赖的数据得到新的数据！1）从Vue中引入computed 2）在setup中进行使用，将一个函数，函数的返回值就是计算好的数据 3）最后呢通...

99+

2023-05-17

Vue3 setup computed
Vue3中SetUp的参数props和context实例分析

本篇内容介绍了“Vue3中SetUp的参数props和context实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读...

99+

2024-04-02
vue3中的setup使用和原理解析

目录1.前言2.setup3.源码分析setupStatefulComponent执行setup函数 finishComponentSetup4.总结1.前言最近在做vu...

99+

2024-04-02
Vue3中的setup语法糖、computed函数、watch函数怎么使用

这篇文章主要介绍“Vue3中的setup语法糖、computed函数、watch函数怎么使用”，在日常操作中，相信很多人在Vue3中的setup语法糖、computed函数、watch函数怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简...

99+

2023-07-05
vue3组合式API中setup()概念和reactive()函数的用法是什么

本篇内容主要讲解“vue3组合式API中setup()概念和reactive()函数的用法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3组合式API中setup()概念和react...

99+

2023-07-05