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>
相关推荐
三十_A几秒前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频
前端小菜袅几秒前
PC端原样显示移动端页面方案
开发语言·前端·javascript·postcss·px-to-viewport·移动端适配pc端
Highcharts.js2 分钟前
如何使用Highcharts SVG渲染器?
开发语言·javascript·python·svg·highcharts·渲染器
爱问问题的小李17 分钟前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js
码云数智-大飞21 分钟前
从回调地狱到Promise:JavaScript异步编程的演进之路
开发语言·javascript·ecmascript
m0_7482299923 分钟前
PHP+Vue打造实时聊天室
开发语言·vue.js·php
子兮曰24 分钟前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
前端·javascript·vue.js
喵喵虫9 小时前
uniapp修改封装组件失败 styleIsolation
uni-app
Daniel李华9 小时前
echarts使用案例
android·javascript·echarts
北原_春希9 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts