vue3较于vue2使用上的差别

目录

获取url参数的方式不同

vuex的使用上的不同

在setup函数中使用emit、获取父组件传的数据props

setup钩子函数中使用nextTick

---

获取url参数的方式不同

• vue2

this.$router.query.name

• Vue3

// 先引入useRoute
import {useRoute} from ‘vue-router’

// 然后使用
const route = useRoute();
Const {name} = route.query;

vuex的使用上的不同

• vue2

// store/user/actions.ts
Import * as types from ‘./mutations-types’;
export default({
    getUser({commit}) {
        commit(types.GET_USER, userInfo);
    }
})

// store/user/getters.ts
import state from ‘./state’;
Export default ({
    user: state => state
})

// store/user/index.js
Import actions from ‘./actions’;
Import getters from ‘./getters’;
Import mutations from ‘./mutations’;
Import state from ‘./state’;
Export default {
    actions,
    getters,
    mutations,
    state
}

// store/user/mutations.ts
Import * as types from ‘./mutations-types’;
Import Vue from ‘vue’;
Export default({
    [types.GET_USER](state, userInfo) {
        Vue.set(state, ‘userInfo’, userInfo);
    }
})

// store/user/state.ts
Export default ({
    userInfo: {}
})

// store/index.js
Import Vue from ‘vue’;
Import vuex from ‘vuex’;
Import user from ‘./user’;
Vue.use(vuex);
Export default ({
    namespaced: true,
    Modules: {
        user
    },
    strict: process.env.NODE_ENV !== ‘production’;
})

• Vue3

// store/user/actions.ts
import {Action} from ‘vuex’;
Import * as types from ‘./mutations-types’;
import {State} from './state';
import {State as RootState} from '../index';
export default {
    getUser({commit}, userInfo: object) {
        commit(types.GET_USER, userInfo);
    }
} as Record<string, Action<State, RootState>>; // 按Action定义传入State, RootState

// store/user/getters.ts
import {Getter} from 'vuex';
import {State} from './state';
import {State as RootState} from '../index';
export default {

} as Record<string, Getter<State, RootState>>; // 按Getter定义传入State, RootState


// store/user/index.ts
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';
export type {State} from './state';
export default {
    namespaced: true,
    actions,
    getters,
    mutations,
    state
};

// store/user/mutations.ts
import {Mutation} from 'vuex';
import * as types from '../mutation-types';
import {State} from './state';

export default {
    [types.GET_USER](state, userInfo) {
        state.userInfo = userInfo;
    }
} as Record<string, Mutation<State>>; // 按Mutation定义传入State, RootState

// store/user/state.ts
export interface State {
    userInfo: object;
}

export default {
    userInfo:{},
};

// store/user/store/index.js
import {InjectionKey} from 'vue';
import {createStore, Store} from 'vuex';
import user, {State as UserState} from './user';

// 将各模块的State类型汇总
export interface State {
    user: UserState;
}
export const key: InjectionKey<Store<State>> = Symbol();
const debug = process.env.NODE_ENV !== 'production';
export const store = createStore<State>({
    modules: {
        user
    },
    strict: debug
});
// 向组件注入$store的类型声明
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store<State>;
    }
}

在setup函数中使用emit、获取父组件传的数据props

• vue2 直接使用

this.$emit(fun, data); 
this.$emit('update: name', data);

• vue3中需要在setup中先引入

setup(props, {emit}) {
     emit('getInfo', true);
     emit('update: state', false);
}

setup钩子函数中使用nextTick

• vue3，需要提前引入

import {nextTick} from 'vue';

nextTick(() => {
    // do something...
})

持续更新中...