全局创建
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默认值是 5
const num = ref(5);
// 定义更新num的方法
const setNum =(v)=>{
num.value=v;
}
// 返回num与setNum
// 定义msg
const 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+2
return 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"