关于vue3 的setup

关于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 时能够提供更好的类型推断。

脚本之家一文详解Vue3中的setup函数的用法和原理

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 () { 
    }
  }
}