uniapp组合式和选项式

组合式:

javascript 复制代码
<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

// 响应式数据
const count = ref(0)
const list = ref([])
const inputValue = ref('')

// 计算属性
const filteredList = computed(() => {
  return list.value.filter(item => item.includes(inputValue.value))
})

// 生命周期钩子
onMounted(() => {
  console.log('组件挂载完成')
})

onLoad(() => {
  console.log('页面加载')
})

onShow(() => {
  console.log('页面显示')
})

// 方法
const increment = () => {
  count.value++
}

const fetchData = async () => {
  try {
    const res = await uni.request({
      url: ''
    })
    list.value = res.data
  } catch (error) {
    console.error('请求失败:', error)
  }
}

const handleInput = (e) => {
  inputValue.value = e.detail.value
}
</script>

<template>
</template>

选项式:

javascript 复制代码
<template>
</template>

<script setup>
export default{
    components: {
		},
    data() {
			return {
           };
           },
    onShow(){
    },
    methods:{
    },
    onLoad(){
    }
};
</script>


<style scoped>

</style>
相关推荐
谢慧琼18 分钟前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
拾年2753 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__3 小时前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试
拾年2753 小时前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞
前端·javascript·react.js
默_笙3 小时前
😝 5 亿次循环卡死页面?我用 Web Worker 把它扔进后台线程,页面丝滑如初
前端·javascript
CAD老兵3 小时前
一行代码集成 DWG/DXF 图纸查看:测量批注,数据不出站
前端·javascript·github
小林ixn3 小时前
单例模式:从弹窗管理到全局状态,一个模式搞定
前端·javascript·设计模式
猫不易3 小时前
从 Virtual DOM 到 Vapor:Vue 3.6 的另一条路
前端·vue.js
名字还没想好☜4 小时前
React 用 useEffect 做轮询实战:setInterval 拿到旧 state 的闭包陷阱与正确清理
前端·javascript·react.js·react·useeffect