Uniapp 核心基础：语法与生命周期

一、基础语法

Uniapp 基于 Vue.js 框架开发，因此继承了 Vue 的核心语法：

1. 模板语法

   • 数据绑定：{{ message }}
   • 指令：
     v-if（条件渲染）
     v-for（列表渲染）
     v-bind（属性绑定，简写 :）
     v-on（事件监听，简写 @）

2. 单文件组件（SFC）
   由三部分组成：

   <template>  <!-- 视图层 --> </template>
   <script>    <!-- 逻辑层 --> </script>
   <style>     <!-- 样式层 --> </style>
   

3. 平台差异处理
   使用条件编译解决多端兼容性：

   // #ifdef H5
   console.log("仅H5生效");
   // #endif
   

---

二、生命周期

生命周期分为三类，通过钩子函数触发：

1. 应用生命周期（App.vue）

钩子函数	触发时机
onLaunch	初始化完成时（仅触发一次）
onShow	启动或从后台进入前台
onHide	从前台进入后台
onError	脚本报错时

示例：

export default {
  onLaunch() {
    console.log("App初始化完成");
  }
}

2. 页面生命周期（页面组件）

钩子函数	触发时机
onLoad	页面加载完成（可接收参数）
onShow	页面显示
onReady	页面初次渲染完成
onHide	页面隐藏
onUnload	页面卸载

示例：

export default {
  onLoad(options) {
    console.log("接收参数：", options.id);
  }
}

3. 组件生命周期（Vue 标准）

钩子函数	触发时机
beforeCreate	实例初始化前
created	实例创建完成
beforeMount	挂载到DOM前
mounted	挂载到DOM后
beforeUpdate	数据更新前
updated	数据更新完成
beforeDestroy	实例销毁前
destroyed	实例销毁后

---

三、生命周期执行顺序

一次页面加载流程：

1. App.onLaunch → 2. App.onShow → 3. Page.onLoad → 4. Page.onShow → 5. Page.onReady

---

四、注意事项

1. 页面栈管理
   onUnload 在页面关闭时触发，适合清理定时器或全局事件。
2. 异步问题
   onReady 后操作 DOM 最安全，避免 onLoad 中操作未渲染的节点。
3. 平台差异
   小程序端不支持 beforeDestroy，需用 onUnload 替代。

通过掌握语法规则和生命周期时序，可高效控制数据流与视图渲染，实现跨平台应用开发。