VUE的创建与配置
一、Vue3 简介与项目搭建
1.1 Vue3 核心优势
Vue3 作为新一代前端框架，相比 Vue2 有以下显著改进：
性能大幅提升：
打包体积减少 41%，应用加载更快
初次渲染速度提升 55%，更新渲染快 133%
内存占用减少 54%，运行更流畅
技术架构升级：
使用 Proxy 重写响应式系统，解决 Vue2 中数组和对象监听限制
全新的虚拟 DOM 实现，优化 diff 算法
更好的 TypeScript 支持，类型推断更完善
1.2 项目创建与配置
使用 Vite 创建项目（推荐）：
npm create vue@latest
cd your-project
npm install
npm run dev项目结构特点：
index.html作为入口文件src/目录存放源码支持
<script setup>语法糖更好的热重载体验
二、Composition API 核心语法
2.1 setup 函数与语法糖
传统 setup 函数：
export default {setup() {const message = 'Hello Vue3'return { message }}
}setup 语法糖（推荐）：
<script setup>
const message = 'Hello Vue3'
// 变量和方法自动暴露给模板，无需 return
</script>优势：代码更简洁，自动导出，无需手动返回模板用的数据和方法。
2.2 响应式数据创建
ref - 处理基本类型数据
<script setup>
import { ref } from 'vue'const count = ref(0) // 创建响应式数据
const name = ref('张三')const increment = () => {count.value++ // JS中修改需要 .valuename.value = '李四'
}
</script><template><p>{{ count }}</p> <!-- 模板中不需要 .value --><p>{{ name }}</p>
</template>特点：
适合字符串、数字、布尔值等基本类型
JS 中操作需要
.value，模板中自动解包也可以处理对象类型，内部会自动调用 reactive
reactive - 处理对象类型数据
<script setup>
import { reactive } from 'vue'const user = reactive({name: '张三',age: 25,address: {city: '北京',area: '朝阳区'}
})const updateUser = () => {user.name = '李四' // 直接修改，不需要 .valueuser.age = 30user.address.city = '上海' // 深层嵌套也是响应式的
}
</script>特点：
专门用于对象和数组等复杂数据类型
直接修改属性即可，不需要
.value默认深度响应式，嵌套对象变化也会触发更新
2.3 ref 与 reactive 的选择指南
使用原则：
基本类型数据：必须使用
refconst count = ref(0) // ✅ 正确 const count = reactive(0) // ❌ 错误，会报错简单对象：
ref和reactive都可以// 两种方式都可以 const user = ref({ name: '张三', age: 25 }) const user = reactive({ name: '张三', age: 25 })复杂嵌套对象：推荐使用
reactiveconst complexData = reactive({user: {profile: {personal: {name: '张三',contacts: [{ type: 'phone', value: '138...' }]}}} })需要重新赋值：使用
refconst data = ref({ name: '张三' }) data.value = { name: '李四' } // ✅ 保持响应式const data = reactive({ name: '张三' }) data = { name: '李四' } // ❌ 失去响应式
2.4 toRefs 与 toRef 的解构利器
问题场景：
const user = reactive({ name: '张三', age: 25 })
const { name, age } = user // ❌ 解构后失去响应式解决方案：
<script setup>
import { reactive, toRefs, toRef } from 'vue'const user = reactive({name: '张三',age: 25,gender: '男'
})// 批量解构保持响应式
const { name, age } = toRefs(user)// 单个属性解构
const gender = toRef(user, 'gender')const updateInfo = () => {name.value = '李四' // 解构后仍需要 .valueage.value = 30
}
</script>使用场景：
在组合式函数中返回响应式对象时
需要在模板中直接使用对象属性时
将 reactive 对象的属性传递给复合函数时
三、响应式进阶与生命周期
3.1 computed 计算属性
只读计算属性：
<script setup>
import { ref, computed } from 'vue'const price = ref(10)
const quantity = ref(2)// 计算总价，依赖变化时自动更新
const total = computed(() => {return price.value * quantity.value
})
</script>可读写计算属性：
<script setup>
import { ref, computed } from 'vue'const firstName = ref('张')
const lastName = ref('三')const fullName = computed({// 读取时计算全名get() {return firstName.value + lastName.value},// 修改时拆分姓名set(newValue) {const [first, last] = newValue.split('')firstName.value = firstlastName.value = last}
})const changeName = () => {fullName.value = '李四' // 触发 setter 方法
}
</script>计算属性特点：
基于依赖缓存，只有依赖变化时才重新计算
相比方法调用，性能更好
适合复杂逻辑计算和数据处理
3.2 watch 监听器的五种使用场景
场景1：监听基本类型
const count = ref(0)
watch(count, (newVal, oldVal) => {console.log(`从${oldVal}变为${newVal}`)
})场景2：监听对象类型
const user = ref({ name: '张三', age: 25 })
watch(user, (newVal, oldVal) => {console.log('用户信息变化', newVal)
}, { deep: true }) // 需要手动开启深度监听场景3：监听 reactive 对象
const user = reactive({ name: '张三', age: 25 })
watch(user, (newVal, oldVal) => {console.log('用户信息变化', newVal)
}) // 默认开启深度监听场景4：监听特定属性
const user = reactive({ name: '张三', age: 25 })
watch(() => user.name, (newName, oldName) => {console.log(`姓名从${oldName}变为${newName}`)
})场景5：监听多个数据源
const name = ref('张三')
const age = ref(25)
watch([name, age], ([newName, newAge], [oldName, oldAge]) => {console.log('姓名或年龄发生变化')
})3.3 watchEffect 自动依赖追踪
<script setup>
import { ref, watchEffect } from 'vue'const searchText = ref('')
const results = ref([])// 自动追踪依赖，依赖变化时自动执行
watchEffect(() => {if (searchText.value) {// 模拟搜索results.value = ['结果1', '结果2'].filter(item => item.includes(searchText.value))} else {results.value = []}
})
</script>watch vs watchEffect：
| 特性 | watch | watchEffect |
|---|---|---|
| 依赖声明 | 显式声明 | 自动收集 |
| 立即执行 | 默认不立即执行 | 立即执行 |
| 旧值获取 | 可以获取旧值 | 不能获取旧值 |
| 使用场景 | 需要精确控制监听目标 | 依赖关系复杂或动态 |
3.4 生命周期钩子
Vue2 与 Vue3 生命周期对比：
| Vue2 | Vue3 | 执行时机 |
|---|---|---|
| beforeCreate | setup | 组件初始化前 |
| created | setup | 组件初始化后 |
| beforeMount | onBeforeMount | DOM挂载前 |
| mounted | onMounted | DOM挂载后 |
| beforeUpdate | onBeforeUpdate | 数据更新前 |
| updated | onUpdated | 数据更新后 |
| beforeDestroy | onBeforeUnmount | 组件卸载前 |
| destroyed | onUnmounted | 组件卸载后 |
常用生命周期使用：
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'const data = ref(null)onMounted(() => {console.log('组件挂载完成')// 调用接口、初始化第三方库等
})onUnmounted(() => {console.log('组件即将销毁')// 清理定时器、取消订阅等
})
</script>