属性暴露：单向defineProps、双向defineExpose

在 Vue 3 中，为了更好地支持 TypeScript 和更好地控制组件的 API，提供了两个新的函数：`defineProps` 和 `defineExpose`。

`defineProps` 允许我们在组件中定义属性，并且可以指定它们的类型、默认值等信息。这些属性是只读的，只能从组件的父组件传递到组件中。在组件中使用这些属性时，可以使用 `props` 选项来接收它们。例如：

import { defineComponent, defineProps } from 'vue'

const Props = defineProps({
  message: String,
  count: {
    type: Number,
    default: 0
  }
})

export default defineComponent({
  props: Props,
  setup(props) {
    // 使用 props.message 和 props.count
  }
})

`defineExpose` 允许我们在组件中暴露一些属性或方法，以便它们可以被组件的父组件或其他组件使用。这些属性或方法是可写的，所以需要谨慎使用。在组件中使用这些属性或方法时，可以使用 `expose` 选项来暴露它们。例如：

import { defineComponent, defineExpose, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    defineExpose({
      count,
      increment
    })
    return {
      count,
      increment
    }
  }
})

在上面的例子中，我们使用 `defineExpose` 函数暴露了 `count` 和 `increment` 两个属性，以便其他组件或父组件可以使用它们。在组件中使用这些属性或方法时，可以使用 `expose` 选项来接收它们。例如：

<template>
  <div>
    Count: {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import MyComponent from '@/components/MyComponent.vue'

export default defineComponent({
  components: {
    MyComponent
  },
  setup() {
    const myComponent = ref(null)
    return {
      myComponent
    }
  },
  mounted() {
    console.log(this.myComponent.count) // 访问 MyComponent 组件的 count 属性
    this.myComponent.increment() // 调用 MyComponent 组件的 increment 方法
  }
})
</script>

通过以上方式，我们可以在 Vue 3 中更好地控制组件的 API，同时也更好地支持 TypeScript。