Vue3中的script setup语法糖怎么使用

这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获，下面我们一起来看看吧。组合式 API：setup()Vue 3 的 Composition API 系列里，推出了一个全新的setup函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。setup选项是一个接收props和context的函数，我们参考文档进行讨论。此外，我们将setup返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。新的setup选项是在组件创建之前,props被解析之后执行，是组合式 API 的入口。
注意：
在setup中你应该避免使用this，因为它不会找到组件实例。setup的调用发生在dataproperty、computedproperty 或methods被解析之前，所以它们无法>在setup中被获取。在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用
这里强调一句 “暴露给模板，跟暴露给外部不是一回事”TIP：说的通俗一点，就是在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在setup里执行。因为在setup之后，其他的生命周期才会被启用，我们对比一下Vue2的Vue3生命周期的变化关于 Vue 生命周期的变化，可以从下表直观地了解：可以看到 Vue 2 生命周期里的beforeCreate和created，在 Vue 3 里已被setup替代。script setup 语法糖它是 Vue3 的一个新语法糖，在setup函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。自动注册属性和方法无需返回，直接使用1.语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！使用方式也很简单，只需要在 script 标签加上 setup 关键字即可组件核心 API 的使用在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。示例：通过defineProps指定当前 props 类型，获得上下文的props对象。示例：使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。代码示列：defineProps用来接收父组件传来的 props ;defineEmits用来声明触发的事件。

//子组件

子组件通过 defineProps 接收父组件传过来的数据，子组件通过 defineEmits 定义事件发送信息给父组件
注：useContext API 被弃用，取而代之的是更加细分的 api。可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。useAttrs：见名知意，这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了class、属性、方法。useSlots: 顾名思义，获取插槽数据。使用示例：传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的template模板，谁都不能访问内部的数据和方法。的组件默认不会对外部暴露任何内部声明的属性。
如果有部分属性要暴露出去，可以使用defineExpose注意：目前发现defineExpose暴露出去的属性以及方法都是unknown类型，如果有修正类型的方法，欢迎评论区补充。如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例：

//父组件

定义响应变量、函数、监听、计算属性computed1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）2、watch需要传递监听的对象，watchEffect不需要3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。返回一个对象的响应式代理。使用ref也能达到我们预期的'counter',并且在模板中,vue进行了处理，我们可以直接使用counter而不用写counter.value.
ref和reactive的关系:ref是一个{value:’xxxx’}的结构，value是一个reactive对象曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明：不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量


useCSSModule：CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少，不过多做介绍。useCssVars: 此 api 暂时免费云主机域名资料比较少。介绍v-bind in styles时提到过。useTransitionState: 此 api 暂时资料比较少。useSSRContext: 此 api 暂时资料比较少。注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用.中可以使用顶层await。结果代码会被编译成async setup()：另外，await 的表达式会自动编译成在await之后保留当前组件实例上下文的格式。
注意
async setup()必须与Suspense组合使用，Suspense目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 – 如果你现在感兴趣，可以参照 tests 看它是如何工作的。配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个script，在上方写入对应的export即可，需要单开一个 script。可以和普通的一起使用。普通的在有这些需要的情况下或许会被使用到：无法在声明的选项，例如inheritAttrs或通过插件启用的自定义的选项。声明命名导出。运行副作用或者创建只需要执行一次的对象。在script setup 外使用export default，其内容会被处理后放入原组件声明字段。注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要包含或排除或直接检查组件的选项时，你需要这个名字。关于“Vue3中的script setup语法糖怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue3中的script setup语法糖怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: Java的序列化与反序列化怎么实现

本篇内容介绍了“Java的序列化与反序列化怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Java平台允许我们在内存中创建可复用的Java对象，但一般情况…