uniapp + vue3 + Script Setup 写法变动 (持续更新)

一、uniapp 应用生命周期:

https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html

注意: 应用生命周期仅可在App.vue中监听,在其它页面监听无效

二 、uniapp页面生命周期:

https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

三、 引入生命周期

从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期及页面的生命周期。

  • 使用组合式API
javascript 复制代码
import { defineComponent, ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
export default defineComponent({
  setup() {
    const title = ref('Hello')
    onReady(() => {
      console.log('onReady')
    })
    return {
      title
    }
  }
})
  • 使用 Script Setup
javascript 复制代码
<script setup>
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
const title = ref('Hello')
onReady(() => {
  console.log('onReady')
})
</script>
相关推荐
妙码生花9 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
郭wes代码11 小时前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
用户8417948145611 小时前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
用户8471810541911 小时前
DeepAgents.js 教程 06—— 跨会话长期记忆(Memory与AGENTS.md)
javascript·agent
Tian_Hang12 小时前
Vue3 父子组件通讯
前端·javascript·vue.js
breeze jiang12 小时前
React memo、useCallback 与 useMemo:父组件多状态时如何减少无效渲染
前端·javascript·react.js
代码不加糖13 小时前
common.js和es6中模块引l入的区别?
前端·javascript·es6
云浪14 小时前
从 0 到实战:掌握向量数据库 Milvus,构建 AI 应用的核心能力
javascript·数据库·人工智能
huabuyu15 小时前
CLS 自动化归因及自愈:让系统自己定位根因、修复并验证
前端·javascript
C++、Java和Python的菜鸟15 小时前
第13章 前端Web实战(Tlias案例)
前端·javascript·vue.js