关于vue3 的setup
OptionsAPI 与 CompositionAPI
Options API 是 Vue.js 2.x 中使用的传统组件设计模式。它基于选项对象,将组件的数据、计算属性、方法、生命周期钩子等功能按照选项的形式进行组织。Options API 的特点包括:
1.易于上手:Options API 的结构清晰,容易理解和学习,适合初学者入门。
2.逻辑分离:不同功能的代码被分离到不同的选项中,使得代码更易维护和阅读。
3.依赖注入:通过 this 上下文可以方便地访问到组件的属性和方法。
Composition API 是 Vue.js 3.x 中引入的新特性,旨在解决 Options API
在复杂组件中难以维护的问题。Composition API允许将组件的逻辑按照功能相关性进行组织,而不是按照选项分散组织。Composition API 的特点包括:
1.逻辑复用:可以将逻辑抽取为可复用的函数,更方便地在不同组件之间共享逻辑。
2.代码组织:将相关逻辑放在一起,使得组件更加清晰和易于维护。
3.更好的类型推断:由于函数可以提供更多信息,TypeScript 在使用 Composition API 时能够提供更好的类型推断。
setup语法糖需要用defineExpose把要读取的属性和方法单独暴露出去,否则会访问失败;如果子组件使用setup()函数,则在父组件通过ref可以直接访问其属性,不需要用defineExpose暴露数据。
以下写法均能访问到子组件的属性以及方法:
父组件
<template>
<demo1 ref="demo1"/>
<demo2 ref="demo2"/>
<demo3 ref="demo3"/>
</template>
<script setup>
import Demo1 from '@/components/demo1.vue'
import Demo2 from '@/components/demo2.vue'
import Demo3 from '@/components/demo3.vue'
import {ref,onMounted} from 'vue'
const demo1 = ref(null)
const demo2 = ref(null)
const demo3 = ref(null)
onMounted(()=> {
console.log(demo1.value.count,'demo1子组件')
console.log(demo2.value?.a,'demo2子组件')
console.log(demo3.value.list[0],"demo3子组件")
})
</script>
子组件demo1
<template>
<h1>i'm demo1 content{{count}}</h1>
</template>
<script >
import {ref} from 'vue'
export default {
setup () {
const count = ref(999)
return {
count
}
}
}
子组件demo2
<template>
<h1>我是demo2</h1>
</template>
<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
defineExpose({
a
})
</script>
子组件demo3
<template>
<h1>我是demo3</h1>
</template>
<script>
export default {
data () {
return {
list:['a','b','c']
}
},
methods: {
btn () {
}
}
}