uni-app中使用vue3语法详解

全局创建

app.use(createPina()).mount

全局方法

通过app.config.globalProperties.xxx可以创建
这里我们写了一个字符串翻转的全局方法
main.js里面添加一个全局方法
不要忘了加$ 否则会报错

// #ifdef VUE3
//导入创建app
import { createSSRApp } from 'vue'
//导入创建app的方法
export function createApp() {//创建app的实例const app = createSSRApp(App)//自己添加一个全局方法app.config.globalProperties.$reverse=function(str){return str.split('').reverse().join('')}return {app}
}
// #endif

index.vue里面使用
定义字符串msg,以及方法setMsg并返回

<template><view><view>setUp</view><button @click="setNum(num+5)">{{num}}</button><button type="warn" @click="setMsg($reverse(msg))">{{msg}}</button></view>
</template>
<script>// 导入ref响应数据import {ref} from 'vue'export default {setup(props,context){console.log(props,context)// 父组件传入的参数，context上下文 attrs属性，emit发送事件方法 expose导出 slots插槽// setup相当于created生命周期// 定义num默认值是 5const num = ref(5);// 定义更新num的方法const setNum =(v)=>{num.value=v;}// 返回num与setNum// 定义msgconst msg = ref('你好msg')const setMsg = v=>msg.value=v;return {num,setNum,msg,setMsg}}}</script>

setup组合式api

导入ref响应数据
import {ref} from ‘vue’
setup相当于created生命周期

export default{
setup(props,context){
var num=ref(5)
return {num}
}
<script setup></script>

响应式核心

ref 定义响应是值类型方法
reactive 引用类型
computed 从现有数据计算新的数据
两种方式都可以实现

const dn=computed(()=>n.value*2)
const fee=computed({get(){if(n.value==1){return 7}else{var total=n.value*5+2return total}},set(v){n.value=Math.floor((v-2)/5)}})

watch监听数据的变化

const stop=watch(list,(val,oldVal)=>{uni.setStorageSync(list,"list")},{deep:true})

watchEffect监听副作用（只要被这个方法引用的数据，发送变化都会触发）

watchEffect(()=>{uni.setStorageSync("list",list)uni.setStorageSync("n",n.value)},

readyonly只读常用与优化

生命周期带on

可以简记为
挂载前后
更新前后
卸载前后
激活前后
setup中的生命周期，没有beforeCreate与created
setup的生命周期需要加on前缀
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

依赖注入provide inject

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用== provide 和 inject== 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。

组件相关

< script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 < script setup> 中是直接可用的：

defineProps 定义props

const props = {
modelvalue:(type:[Number.Stringl.defaut:)
maxLength:{type:Number,default:0}
}

defineEmit
子组件向父组件事件传递

const emits =defineEmit(["update:modelValue"])
emits("update:modelValue" ,content.value)

defineExpose暴露一个方法让父组件可以通过ref调用
通过ref的方式调用子组件的clear方法
子组件必须暴露clear ，父组件才能调用

v-model简写方式

:modelValue="msg"
@update:modelValue="msg=$event"