vue3-基础语法

1.创建空项目

2.运行项目

3.项目结构

4.组合式API入口-setup语法糖

5.reactive和ref函数

【reactive】将对象类型的参数变成响应式的对象

【ref】将对象类型或者普通类型的参数变成响应式的对象

6.computed计算属性

7.watch侦听数据

侦听【单个数据】

同时侦听【多个数据】

【immediate立即执行】

【deep深度监听】，侦听（嵌套结构）对象的属性是否发生变化

【精确侦听对象里某个数据】的变化，而不是开启deep侦听对象的所有数据

8.生命周期函数

setup() 函数执行时机：组件实例初始化后，但尚未挂载 DOM

所有生命周期钩子必须在 setup() 中同步调用

1. onBeforeMount

   • 触发时机：组件挂载到 DOM 之前
   • 模板编译完成，但尚未将虚拟 DOM 渲染为真实 DOM

2. onMounted

   • 触发时机：组件挂载到 DOM 之后
   • 可以安全访问 DOM 元素 (ref 已解析)，适合初始化操作
   • 注意：子组件可能尚未挂载完成

3. onBeforeUpdate

   • 触发时机：响应式数据变化后，虚拟 DOM 重新渲染之前
   • 适合在更新前访问当前 DOM 状态

4. onUpdated

   • 触发时机：数据变化导致的虚拟 DOM 重新渲染之后
   • 可以操作更新后的 DOM，避免在此修改状态以防循环更新

5. onBeforeUnmount

   • 触发时机：组件实例卸载之前
   • 适合清理定时器、取消事件监听等资源回收操作

6. onUnmounted

   • 触发时机：组件实例卸载之后
   • 所有子组件已卸载，事件监听器已移除

9.组件通信-父传子

10.组件通信-子传父

11.获取模板引用ref、defineExpose

12.跨层级组件通信provide&inject