vue3 中 setup 函数、defineComponent 函数 和 script 标签上的 setup
setup() 是在 beforeCreate 钩子之前执行的一个函数。setup 接收 2 个参数:setup 的返回值:setup() 函数的可访问性
·
目录
一、setup 函数
setup() 函数是在 beforeCreate 钩子之前执行的一个函数。
setup 接收 2 个参数:
- props:一个响应式的对象,包含了从父组件中传过来的所有属性。不能使用 ES6 解构。
- context:一个普通的对象,暴露了其它可能在 setup 中有用的值。能使用 ES6 解构。
setup 的返回值:
- 一个对象:对象里的属性都可以在模板中使用。
- 当 setup 函数返回一个对象时,该对象里的属性均可在模板中使用。只不过,如果该属性是个对象,在模板里使用该对象时,该对象会被自动浅解包,因此,不应在模板中直接使用
对象.属性名
的形式访问该对象里的属性。
- 当 setup 函数返回一个对象时,该对象里的属性均可在模板中使用。只不过,如果该属性是个对象,在模板里使用该对象时,该对象会被自动浅解包,因此,不应在模板中直接使用
- 一个函数:该函数可以直接使用在同一作用域中声明的响应式状态。
setup 函数的特点:
- 在 setup 函数中定义的变量和方法,必须将它们 return 到最后的结果对象中去,才能在 template 模板中使用它们。
setup 函数的使用:
例如:
<template>
<div>{{ str }}</div>
<div v-for="(item, idx) in list" :key="idx"></div>
<div>{{ obj }}</div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
export default {
setup() {
const str = ref('qwert')
const list = ref([])
const obj = reactive({})
return {
str,
list,
...toRefs(obj)
}
}
}
</script>
【拓展】setup 函数的可访问性
可访问到属性 | 不可访问到的属性 |
---|---|
props | data |
attrs | computed |
slots | methods |
emit | refs |
二、defineComponent 函数
defineComponent 函数是 setup 函数的语法糖之一。
defineComponent 函数支持 TypeScript 的参数类型推断(专为 TS 准备的)。若使用的是 ts + vue3,强力推荐使用它。
1、defineComponent 函数的一般用法
例如:
<template>
<div>{{ str }}</div>
<div v-for="(item, idx) in list" :key="idx"></div>
<div>{{ obj }}</div>
</template>
<script>
import { ref, toRefs, reactive, defineComponent } from 'vue'
export default defineComponent({
setup() {
const str = ref('qwert')
const list = ref([])
const obj = reactive({})
return {
str,
list,
...toRefs(obj)
}
}
})
</script>
2、ts + vue3 中使用 defineComponent 函数
例如:
import { defineComponent, PropType} from 'vue';
interface UserInfo = {
id: number,
name: string,
age: number
}
export default defineComponent({
//props需要使用PropType泛型来约束。
props: {
userInfo: {
type: Object as PropType<UserInfo>, // 泛型类型
required: true
}
},
})
三、<script setup> 标签
<script setup> 标签又称 setup 文件——是 setup 函数的语法糖之一。
setup 文件的特点:
- 对于在 setup 文件中定义的属性和方法,无需将它们 return 到最后的结果对象中去,直接在 template 模板中使用它们即可。
例如:
<template>
<div>{{ str }}</div>
<div v-for="(item, idx) in list" :key="idx"></div>
<div>{{ obj }}</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const str = ref('qwert')
const list = ref([])
const obj = reactive({})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)