vue3中<script setup>和setup函数的区别是什么 | 您所在的位置:网站首页 › vue模板使用promise函数 › vue3中<script setup>和setup函数的区别是什么 |
vue3中<script setup>和setup函数的区别是什么
发布时间:2023-04-27 16:32:15
来源:亿速云
阅读:76
作者:iii
栏目:开发技术
这篇“vue3中<script setup>和setup函数的区别是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中<script setup>和setup函数的区别是什么”文章吧。 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 语法,它具有更多优势: 更少的样板内容,更简洁的代码。 能够使用纯 TypeScript 声明 props 和自定义事件。 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。 以上是vue3官网对的说明,其实<script setup> 就是 setup函数的一个语法糖。 一、基本语法setup函数的写法 import { ref } from 'vue' export default { setup () { const num = ref(1); return { num } } }setup函数的写法中定义的变量和函数都需要return出来,不然无法正常使用。 在<script setup>语法糖的写法 import { ref } from 'vue' const num = ref(1)在<script setup>语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同, 中的代码会在每次组件实例被创建的时候执行。 二、使用外部文件区别setup函数 {{test(name)}} import { ref } from 'vue' import { test } from '@/utils/test.js' export default { setup () { const name = ref('huang') const testName = test return { name, testName } } }setup函数使用外部文件时需要在setup函数中定义成一个方法才能正常使用。 <script setup>语法糖 {{ test(name) }} import { test } from '@/utils/test.js' import { ref } from 'vue' const name = ref('huang')在<script setup>语法糖中无需再定义成一个方法,可以直接使用 。 三、注册组件setup函数 import Hello from '@/components/HelloWorld' export default { components: { Hello } } <script setup>语法糖 import Hello from '@/components/HelloWorld'不需要在component 中注册了,可以直接使用。 四、使用自定义指令setup函数 使用了setup函数 export default { directives: { onceClick: { mounted (el, binding, vnode) { console.log(el) } } }, } <script setup>语法糖 使用了script setup const vMyDirective = { beforeMount: (el) => { console.log(el) } }全局注册的自定义指令将正常工作。本地的自定义指令在 中不需要显式注册,但他们必须遵循 vNameOfDirective 这样的命名规范 五、父传子数据通信setup函数 export default { props: { num: { type: Number, default: 1 } }, setup (props) { console.log(props) } } <script setup>语法糖 import { defineProps } from 'vue' const props = defineProps({ num: { type: Number, default: 1 } }) 六、子传父数据通信setup函数 export default { setup (props, context) { const sendNum = () => { context.emit('sendNum', 200) } return { sendNum } } } <script setup>语法糖 import { defineProps, defineEmits } from 'vue' const emit = defineEmits(['submit']) const sendNum = () => { emit('submit', 1000) }defineProps 和 defineEmits 都是只能在 中使用的编译器宏。他们不需要导入,且会随着 的处理过程一同被编译掉。 defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值。 defineProps 和 defineEmits 在选项传入后,会提供恰当的类型推导。 传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此,传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是,它可以引用导入的绑定,因为它们也在模块作用域内。 七、defineExpose和expose使用setup函数定义的组件的expose是默认开启的,会将函数内定义的实例变量、方法全部暴露出去。而使用<script setup>的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 中声明的绑定。 可以通过 defineExpose 编译器宏来显式指定在 组件中要暴露出去的属性,若不使用 defineExpose 则获取不到当前引用的组件实例变量、方法。 使用了defineExpose import { ref } from "vue"; const type = ref("语法糖"); const msg = ref("使用了defineExpose"); defineExpose({ type, msg, });不使用defineExpose import { ref } from "vue"; const type = ref("语法糖"); const msg = ref("使用了defineExpose"); 八、与普通的 一起使用可以和普通的 一起使用。普通的 在有这些需要的情况下或许会被使用到: 声明无法在 中声明的选项,例如 inheritAttrs 或插件的自定义选项。 声明模块的具名导出 (named exports)。 运行只需要在模块作用域执行一次的副作用,或是创建单例对象 // 普通 , 在模块作用域下执行 (仅一次) runSideEffectOnce() // 声明额外的选项 export default { name:'header', inheritAttrs: false, customOptions: {} } // 在 setup() 作用域中执行 (对每个实例皆如此) 九、顶层的 await中可以使用顶层 await。结果代码会被编译成 async setup() const post = await fetch('https://api.com').then((r) => r.json())另外,await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。 十、限制 使用src属性由于模块执行语义的差异, 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候,对于开发者和工具来说都会感到混乱。因此, 不能和 src attribute 一起使用。 以上就是关于“vue3中<script setup>和setup函数的区别是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。 推荐阅读: 如何用40行代码把Vue3的响应式集成进React做状态管理 Vue3的响应式和以前的区别免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue3 setup 上一篇新闻:Jotai Immer怎么实现undo redo功能 下一篇新闻:java.lang.NullPointerException异常的原因及解决方法是什么 猜你喜欢 vue父组件向子组件传值的方法是什么 vue递归组件是什么及怎么实现 vue中v-on怎么监听多个方法 vue中ref如何用 vue.js如何换行 vue如何监听回到顶部滚动事件 如何用Vue代码实现一个底部导航栏组件 Vue动态组件和异步组件的区别是什么 vue怎么实现选项卡点击切换且能滑动切换功能 Vue如何用watch监听数组 |
CopyRight 2018-2019 实验室设备网 版权所有 |