vue3一种page结构

<template>
    <view>

    </view>
</template>

<script setup>
    // 引入生命周期，
    import {onLoad,onReady,onShareAppMessage,onShow} from "@dcloudio/uni-app";
    // 引入计算属性
    import {computed,watch,getCurrentInstance,ref} from "vue";

    let { proxy } = getCurrentInstance(); // onload执行登录校验
    
    // 变量示例
    let name = ref('默认值');
    // 使用 console.log(name.value)
    // 重新赋值 name.value = '我是新的值'

    // 计算属性
    let nameC = computed(() => {
        let style = "name"
        // do something
        // 当这个方法内的所有用到的值发生改变时 都会重新执行并计算
        return style;
    })
    //  假设监听 一个 name 变量
    watch(name, (newValue, oldValue) => {
        // do something 
        // 这里就是当 name 属性值发生变化时 ，就会执行此方法
    })
    // 如果需要监听多个变量，且要做的事情是一样的 那么我们只需要把第一个参数变为数组即可
    watch([name, name2], (newValue, oldValue) => {
        // do something 
        // 这里就是当 name或者name2 值发生变化时 ，就会执行此方法
    })

    // 方法示例，获取当前页面栈
    let action = (id) => {
        console.log('我是一个方法')
        // vue3
        // 获取当前页面栈
        // const self = getCurrentPages()?.[0]
        // self.$http()
    }

    // 生命周期示例
    // onload示例
    onLoad(async(e) => {
        await proxy.$onLaunched;
    })
</script>

<style>

</style>