vue3知识

vue3基础知识

import {
    reactive, //加入响应式api（必须是对象或者数组）
    ref,//加入响应式api（基本数据类型生成一个响应式引用对象 使用：counter.value）尽量用ref
    readonly,//只读 
    isProxy,//判断是否是reactive readonly ref
    isReactive,//判断是否是否是reactive
    isReadonly,//判断是否是readonly
    toRefs,//用来解耦全部响应式对象
    toRef,//用来解耦个别响应式对象
    computed,//计算属性/返回ref对象
    watch,//侦听数据（不会立即执行，）
    watchEffect,//侦听数据(立即执行，收集所有依赖，副作用)
    provide,//提供子组件数据（配合readonly使用）
    inject,//子组件获取父组件共享的数据
    defineProps,//定义props
    definEmit,//定义emit
    getCurrentInstance//获取全局的属性
} from "vue";


setup(props,{attrs,slots,emit}){
    //定义props
    const props=defineProps({
        message:{
            type:String,
            default:"111"
        }
    });
    //获取全局属性
    const app=getCurrentInstance().appContext.config.globalProperties
    //定义emit
    const emit=definEmit([event1,event2]);
    emit("event1","1000")
    
    //定义reactive对象
    const state=reactive({
        counter:100,
        isShow:true
    });
    
    //定义ref对象
    let counter=ref(100);
    const readonlyState=readonly(state);
    
    //计算属性
    const computedName=computed({
        get:()=>{},
        set:()=>{}
    });
    
    //侦听数据
    watchEffect(()=>{
        //数据更新执行副作用
    },{
        flush:'post'//挂载完执行
    })
    watch(()=>{return {...state}}(newvalue,oldvalue)=>{
        console.log(newvalue,oldvalue)
    },{
        deep:true,//深度侦听
        immediate:true//立即执行
    })
    
    //局部函数
    const increment=()=>{
        state.counter++;
        counter.value++;
    }
    
    return{
        state,
        counter,
        increment
    }
}