Vue3 setup 组合式api

全局创建

app.use(createPina()).mount(

全局方法

app.config.globalProperties.xxx

setup

<script setup>中的代码会在每次组件实例被创建的时候执行。

代码结构

//导入响应式数据
    import {ref} from 'vue'
     export default {
        setup(props,context){
            //定义num默认值
            const num = ref(5)
            const setNum =(v)=>{
                num.value=v
            }
            const msg = ref('你好msg')
            const setMsg =(v)=>msg.value=v
            return {num,setNum,msg,setMsg}
            
        }
    }

响应式核心

1. ref接收值

<template>
    <view>
        <view>{{msg}}</view>
    </view>      
</template>

//导入响应式数据
    import {ref} from 'vue'
     export default {
     
            const msg = ref('你好msg')
      
            return {msg}
            
        }
    }

2.reactive(): 返回一个对象的响应式代理[proxy的实例对象]

//list数据会响应式变化
const list = reactive(uni.getStorageSync("list")||[])
    const addList = (e)=>{
        console.log(e);
        list.unshift(e.detail.value)
        e.detail.value=''
    }

<view>
        <input type="text" placeholder="请输入" @confirm="addList">
        <view v-for="(item,index) in list" :key="index" >
            {{item}}
            <button type="default" size="mini"  @click="list.splice(index,1)">x</button>
        </view>
 </view>

3.watch():侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数,与watchEffect不同的是懒加载，不是立即执行。。

//监听
        watch:{
            num:{
                handler(val,oval){
                    uni.setStorageSync("num",val)
                },
                deep:true
                
            }
        },

<view @click="num++" > num:{{num}}</view>

4.watchEffect():立即运行一个函数（相当于写了immediate：true），同时响应式地追踪其依赖，并在依赖更改时重新执行

watchEffect(()=>{
    uni.setStorageSync("list",list);
    uni.setStorageSync("n",n.value)
},{deep:true})

5.computed计算

//计算
        computed:{
            doublenum:function(){
                return this.num*2
            },
            pricenum:{
                get(){
                    return this.num*1.5
                },
                set(v){
                    this.num=v/1.5
                }
            }
        }

生命周期on

onBeforeMount()注册一个钩子，在组件被挂载之前被调用。

onMounted()注册一个回调函数，在组件挂载完成后执行。

onBeforeUpdate()注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onUpdated()注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

onBeforeUnmount()注册一个钩子，在组件实例被卸载之前调用。

onUnmounted()注册一个回调函数，在组件实例被卸载之后调用。

依赖注入

Provide (提供)

• 要为组件后代提供数据，需要使用到 provide() 函数：

<script setup>
    import { provide } from 'vue
    provide(/*注入名*/ 'message'，/*值*/ 'hello!')
</script>

如果不使用 <script setup>，

import { provide } from 'vue'
export default {
setup( ) {
provide(/*注入名*/ 'message'， /*值*/ 'hello!' )
}
}

Inject (注入)

• 要注入上层组件提供的数据，需使用 inject() 函数：

<script setup>
import { inject } from 'vue'
const message = inject( ' message' )
</script>

如果没有使用 <script setup>

import { inject } from 'vue'
    export default {
    setup( ) {
    const message = inject( 'message' )
    return { message }
}

组件相关

defineProps定义props

 const props = defineProps({
         // 长度
         "maxLength":{
             type:[Number,String],
             default:"",
             required: false
         }
}

defineEmits()

发送事件

const emits = defineEmits(["update:modelValue","clear"])

defineExpose暴露事件

     // 暴露一个clear方法让父组件可以通过ref调用
     defineExpose({
         clear
     })