vue3.x的setup语法糖

手机游戏开发者 · 2024-9-9 20:44:52

什么是setup语法糖

vue3.0时setup的变量必要return袒暴露来，template才华获取。到3.2之后只必要在script标签中添加setup，比方<script setup>，组件中不在必要特殊注册，直接引入，属性和方法便不需返回，在<script setup>中自界说的属性、指令可以直接在template使用。
setup参数

使用 setup 函数时，它将汲取两个参数：
1.props
2.context
Props
setup 函数中的第一个参数是 props。正如在一个尺度组件中所渴望的那样，setup 函数中的 props 是相应式的，当传入新的 prop 时，它将被更新。

特殊注意：由于 props 是相应式的，你不能使用 ES6 解构，它会消除 prop 的相应性。

假如必要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操纵：
import { toRefs } from 'vue'setup(props) {  const { title } = toRefs(props)  console.log(title.value)}假如 title 是可选的 prop，则传入的 props 中大概没有 title 。在这种环境下，toRefs 将不会为 title 创建一个 ref 。你必要使用 toRef 更换它：
import { toRef } from 'vue'setup(props) {  const title = toRef(props, 'title')  console.log(title.value)}Context
通报给 setup 函数的第二个参数是 context。context 是一个平常 JavaScript 对象，袒露了别的大概在 setup 中有效的值：
export default {  setup(props, context) { // Attribute (非相应式对象，等同于 $attrs) console.log(context.attrs) // 插槽 (非相应式对象，等同于 $slots) console.log(context.slots) // 触发事故 (方法，等同于 $emit) console.log(context.emit) // 袒露公共 property (函数) console.log(context.expose)  }}context 是一个平常的 JavaScript 对象，也就是说，它不是相应式的，这意味着你可以安全地对 context 使用 ES6 解构。
  setup(props, { attrs, slots, emit, expose }) { ...  }

vue3.x的setup语法糖

所属分类: 问答交流

新帖推荐: 30日

推荐作品