Vue3 + Vite 从零搭建企业级前端项目

Vue3 组合式API核心概念详解
1. ref 和 reactive 的区别
ref 用于定义基础类型数据，在模板中会自动解包，但在 JavaScript 中需要通过 .value 访问。
reactive 用于定义对象类型数据，直接访问属性，但重新赋值会丢失响应性。
示例代码：
import { ref, reactive } from 'vue'
const count = ref(0)
const user = reactive({
name: '张三',
age: 25
})
count.value++
user.age = 26
2. computed 计算属性
计算属性会缓存结果，只有依赖项变化时才重新计算。
import { computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => firstName.value + lastName.value)
3. watch 监听器
可以监听 ref、reactive 或函数返回值的变化。
import { watch } from 'vue'
watch(count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})
watch([count, user], () => {
console.log('count 或 user 发生变化')
})
4. 生命周期钩子
onMounted：组件挂载后执行
onUpdated：组件更新后执行
onUnmounted：组件卸载前执行
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件已挂载')
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
5. 组件通信方式
props/$emit：父子组件通信
provide/inject：跨层级组件通信
Vuex/Pinia：全局状态管理
Event Bus：事件总线（不推荐）