<template><div class="module-wrap"><!-- 使用$props访问props -->XX模块开发中...<!-- 使用子组件 --><ModuleA /></div>
</template><script setup>
// 组合式API写法
import { ref, reactive, watch, watchEffect, computed, onMounted } from 'vue'
// @ 如果没有定义，默认指的就是src下面的内容
import ModuleA from '@components/ModuleA.vue'
import util from '@util/util.js'// ----------------- Props定义 -----------------
const props = defineProps({// 基本数据类型
title: {type: String,default: '默认标题'},count: {type: Number,default: 0},isActive: {type: Boolean,default: false},// 复杂数据类型
items: {type: Array,default: () => []},config: {type: Object,default: () => ({})},callback: {type: Function,default: () => {}},// 联合类型
dynamicValue: {type: [String, Number],default: null}
})// ----------------- 响应式数据 -----------------
// 基本类型用ref
const counter = ref(0)
const message = ref('Hello Vue3')// 复杂类型用reactive
const state = reactive({loading: false,userInfo: {name: 'Guest',age: 18},dataList: []
})// ----------------- 计算属性 -----------------
const reversedMessage = computed(() => {return message.value.split('').reverse().join('')
})// ----------------- 生命周期 -----------------
onMounted(() => {console.log('组件挂载完成')
})// 其他常用生命周期：
// onBeforeMount
// onBeforeUpdate
// onUpdated
// onBeforeUnmount
// onUnmounted// ----------------- 监听器 -----------------
// 监听单个ref
watch(counter, (newVal, oldVal) => {console.log(`计数器变化：${oldVal} → ${newVal}`)
})// 监听props变化
watch(() => props.count, (newCount) => {console.log('接收到新的count值:', newCount)
})// 监听多个数据源
watch([() => props.isActive, message], ([newActive, newMsg]) => {console.log('active或message变化:', newActive, newMsg)
})// 立即执行的监听器
watchEffect(() => {console.log('当前message值:', message.value)
})// ----------------- 方法定义 -----------------
const fetchData = async () => {state.loading = truetry {const response = await util.apiRequest('/data')state.dataList = response.data} catch (error) {console.error('请求失败:', error)} finally {state.loading = false}
}const updateUserInfo = (newInfo) => {Object.assign(state.userInfo, newInfo)
}// 暴露方法给父组件
defineExpose({resetCounter: () => {counter.value = 0}
})// ----------------- 组件逻辑 -----------------
// 初始化操作
fetchData()
</script><style lang="less" scoped>
.module-wrap {padding: 20px;border: 1px solid #eee;border-radius: 4px;// 使用Less特性&:hover {background-color: #f5f5f5;}
}
</style>
主要特性说明：
-
组合式API：使用
<script setup>语法糖，代码组织更灵活 -
类型定义：
-
基本类型：String/Number/Boolean
-
复杂类型：Array/Object/Function
-
联合类型：支持多类型定义
-
-
响应式系统：
-
基本类型使用
ref -
复杂对象使用
reactive
-
-
生命周期：
-
包含主要生命周期钩子
-
使用onXxx格式的API
-
-
监听器：
-
支持单个/多个数据源监听
-
支持watchEffect立即执行
-
-
类型安全：
-
props定义更严谨
-
默认值设置更规范
-
-
样式作用域：
-
添加scoped限制样式作用域
-
支持Less预处理器
-
-
组件通信：
-
defineProps定义props
-
defineExpose暴露组件方法
-
-
异步处理：
-
包含async/await示例
-
-
代码组织：
-
逻辑按功能模块分组
-
添加必要注释说明
-
此模板包含了Vue3开发中最常用的功能模块，可以在此基础上根据实际需求进行扩展。注意需要安装相关依赖（如less-loader处理Less语法）。
