Vue3深入setup 配置项的实现

setup(props, context) {
  // 逻辑初始化
}

// 返回对象模式（推荐）
return { 
  state, 
  methods,
  computedProps 
}

// 返回渲染函数模式（特殊场景）
return () => h('div', 'Hello World')

// 基础类型
const count = ref(0) // 响应式引用

// 对象类型
const state = reactive({ 
  name: '张三',
  age: 18 
}) // 深度响应式对象

// 计算属性
const doubleCount = computed(() => count.value * 2)

import { onMounted } from 'vue'

setup() {
  onMounted(() => {
    console.log('组件挂载完成')
  })
}

<script setup lang="ts">
// 顶层声明自动暴露给模板
const name = ref('张三')
const changeName = () => { 
  name.value = '李四' 
}
</script>

npm install vite-plugin-vue-setup-extend -D

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend({
      nameSuffix: 'Component' // 可选：组件名后缀
    })
  ]
})

<script setup lang="ts" name="UserProfile">
// 组件逻辑
</script>

// 普通函数
const handleClick = () => {
  // 业务逻辑
}

// 带参数函数
const updateData = (newVal: string) => {
  data.value = newVal
}

interface User {
  id: number
  name: string
}

const user = ref<User>({
  id: 0,
  name: ''
})

setup() {
  return () => h('div', {
    class: 'custom-class',
    onClick: () => console.log('Clicked')
  }, [
    h('span', 'Hello '),
    h('strong', 'World')
  ])
}

setup() {
  const fetchData = async () => {
    const res = await api.getData()
    data.value = res.data
  }

  onMounted(fetchData)

  return { data }
}