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>
相关推荐
Highcharts.js22 分钟前
Highcharts 数据过滤实战指南:从基础实现到性能优化
javascript·性能优化·bi·highcharts·前端可视化·数据过滤·交互图表
何何____1 小时前
TypeScript 函数类型兼容性
前端·javascript·typescript
雪芽蓝域zzs1 小时前
json数据转化成interface属性
前端·javascript·json
Java小卷1 小时前
Vue3 动态表单支持弹框组件
前端·vue.js·低代码
溪语流沙2 小时前
【Web全栈进阶】前端对接新契约:信封解包 + 统一错误处理
前端·vue.js·python·状态模式·fastapi
Q26433650232 小时前
【有源码】基于SpringBoot+Vue的居民健康体检与慢病干预管理系统-面向智慧医疗的体检预约与健康知识服务平台
java·vue.js·spring boot·mysql·毕业设计·javaweb·课程设计
鬼手点金2 小时前
ReAct 循环
linux·服务器·前端·javascript·react.js·前端框架
雪芽蓝域zzs2 小时前
Vue导入方法三种方式对比
前端·javascript·vue.js
雪芽蓝域zzs3 小时前
从零搭建【pnpm+Vue3+TS+Setup+VueRouter4+Pinia+Axios+ElementPlus (unplugin 按需)】仿若依后台
前端·vue.js