全局创建

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"