初识vue3

以前面试总是从方面说vue3采用了es6的proxy进行对数据的检测，其实vue3小变动还是挺多的

-vue2	-vue3
created 和beforeCreated	setup
computed	computed
mouted	onMounted(()=>{})
this.$ref	ref
watch	watch(()=>x,(new,old)=>{})
\	watchEffect(()=>{}) 监听数据不需要写明监听谁
data return	ref 基本类型定义响应式数据
data return	reactive 对象定义响应式数据
\	toRefs 常用 return{…toRefs(x)}进行reactive的解构
\	toRaw 拿到数据的原始数据，对原始数据进行修改这样就不会被追踪，也不会更新UI界面，可用于性能优化
Vue.nextTick	nextTick
this.$emit	setup(props, { emit })
prop	prop
\	PropType 如果prop传入参数类型需要被接口规范 需要使用断言 type:Object as PropType<接口> 但官网的例子我敲了 从父传过来的数据并没有被ts检测，不清楚什么情况
EventBus	第三方库mitt 或使用 Provide / Inject
Filters	\

全部采用了引入式api，极大减少了项目的体积

// 一个简单demo
import {
    computed, // 计算属性方法
    reactive, // 响应方法
    toRefs, // 响应属性解组
    defineComponent, // 组鉴定义
    onMounted, // 生命周期函数
    onActivated, // 生命周期函数
    onDeactivated, // 生命周期函数
    onUnmounted, // 生命周期函数
    toRef, //
    watch, // 数据监听函数
    toRaw, // 数据取值
    PropType,
} from "vue";
import { DisplaySetType } from "@/views/review/comment-detail/patientDetailConfigUtil";
export default defineComponent({
    name: "CommonPatientTab",
    components: {},
    props: {
        tabList: {
            type: Object as PropType<DisplaySetType>,
            default: [
                {
                    id: "drug",
                    name: "西/成药处方",
                },
            ],
        },
        needDisabledTab:{
            default:''
        }
    },
    setup(props, { emit }) {
        const state = reactive({
            activatedTab: String as any,
        });
        const changeRadio = (value: any) => {
            emit("enter", state.activatedTab);
        };
        watch(
            () => props.tabList,
            (newVal, oldVal) => {
                let value = newVal;
                if (value) {
                    state.activatedTab = value[0];
                    state.activatedTab = state.activatedTab.id;
                    emit("enter", state.activatedTab);
                }
            }
        );
        return { ...toRefs(state), changeRadio };
    },
});

还有vue3后面可能会放弃vuex 采用pinia

-vuex	-piain
状态：mutation、states、actions、module和getters	states、actions和getters，去除了mutation，actions支持同步和异步
不能获得较好的ts支持	完整的 typescript 的支持
轻量	更轻量
name	id（必填）
获取state：const name = computed(() => this.$store.name)	import { useUserStore } from ‘@/store/user’ const name = computed(() => userStore.name)
触发action：this.$store.displach	import { useUserStore } from ‘@/store/user’ const userStore = useUserStore() userStore.updateName(‘李四’)
触发mutation：this.$store.action	\
持久化：vuex-persistedstate	pinia-plugin-persist

先记录之后慢慢补充