vue2升级vue3

vue2升级vue3

针对 ../vue3-elm-master项目升级做的解析, 该项目目前是webpack@1, vue@2.

1. vue2的缺点,vue3的优势.

vue2的劣势

1. vue2的组件代码复用是用mixin, 容易出现命名冲突, 且无法解决业务逻辑的复用.
   1. vue2的mixin代码复用不好处理,本质是把mixin里的属性和方法直接赋值给组件A, 组件B, 而不是整个业务逻辑.
   2. 业务逻辑是包含数据和方法的, 但是vue2的mixin中的 数据和方法既没有相互关联,又没有通其他业务逻辑隔离, 而是各自独立的. 导致业务关联性不强, 而vue3的hooks则把data和方法放到了一起, 增加了业务关联性
   3. vue2有重名问题, mixin的属性名,方法名,有可能和组件A的属性名,方法名重合, 而vue3的属性值获取是通过getData来获取的,hooks没有重名问题.

2. vue2对typescript支持不足, vue3天然支持ts
3. vue2内部实现过于依赖this, 很多方法都是放到this上,导致无法进行treeshaking.摇树叶, 就导致项目比较大.

vue3的优势

1. vue3的代码复用比较方便. 通过hooks复用,数据和函数联系紧密, 属性名获取是通过getData获取,没有命名重复问题.
2. vue3脚手架默认支持ts
3. vue3的函数独立性比较好, 在treeshaking方面做的比较好, 有明显的性能提升,
   1. 打包大小减少41%
   2. 初次渲染快55%, 更新快133%
   3. 内存使用减少54%
4. vue3支持vue2的大多数特性, 能够对vue2进行向下兼容
5. vue3.2通过setup语法糖进一步简化了开发, 使代码更优雅
6. 增加了很多新特性, 比如Fragment, Teleport, Suspense

vue3配置升级

升级内容包括: vue@3, vuex@4, vue-router@4

1. 把原来的devDependencies全部删除了, 不再使用webpack启动, 而是使用了 vue-cli-service启动

    "devDependencies": {
        "@vue/cli-service": "^5.0.0-beta.2",
        "@vue/compiler-sfc": "^3.4.38",
        "sass": "^1.77.8",
        "sass-loader": "^16.0.1"
    },

2. 启动时遇到了扩展名, 路径别名问题, vue.config.js里的configureWebpack配置解决
   1. 遇到webpack的配置问题, 在vue.config.js里做配置, configureWebpack属性里的内容就是webpack的配置, 会合并到最后的启动项里.
   2. 比如 "src/style/common"引入失败, common是common.scss, 需要给引入文件配置默认的后缀名,
   3. vue-cli里绝对路径需要再路径前加"/", 也就是说"src"不合法,需要"/src",所以配置了别名src: "/src";

// vue.config.js
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'src': path.resolve(__dirname, './src'),
                'assets': path.resolve(__dirname, './src/assets'),
                'components': path.resolve(__dirname, './src/components')
            },
            extensions: ["scss", "vue", "js", "ts", "css"]
        }
    }
}

vue3, vuex@4, vue-router@4的初始化

vue3, vuex@4, vue-router@4 的创建和vue2,Vuex@1, vue-router@1是不同的, 最大的不同是,vue2的相关函数都是全部导入到页面, 然后创建
而vue3, 为了treeshaking, 只导入创建函数.

//vuex
import mutations from './mutations'
import actions from './action'
import getters from './getters'
import {createStore} from "vuex";
export default createStore({
	state: {},
	getters,
	actions,
	mutations,
})

// vue3和vue-router
import { createApp } from 'vue'; 
import {createMemoryHistory, createRouter} from "vue-router";
import App from './App'
import routes from './router/router'
import store from './store/'
const router = createRouter({
    history: createMemoryHistory(),
    routes: [
        {path: "/", component: App}
    ],
})

const app = createApp(App);
app.use(router);
app.use(store);
app.mount("#app");

vue3, vuex, vue-router的使用

vue: setup, vuex: useStore, vue-router: useRouter, useRoute
针对 G:\webpack-learn\vue3-elm-master\src\page\login\login.vue文件做了vue3-setup风格代码修改

1. vuex

// 导入的vuex方法
import { useStore } from 'vuex';
const store = useStore(); //创建vuex对象.
        // 执行vuex的方法
store.commit('RECORD_USERINFO', userInfo);

2. vue-router

// 导入的vue-router方法
import { useRoute, useRouter } from 'vue-router';
const route = useRoute(); // 创建route对象
const router = useRouter();

    // 使用router跳转路由
router.go(-1);

3. vue3

// 导入组件, 可以直接在 template中使用<head-top></head-top>
import headTop from '../../components/header/head';
// 导入的vue方法
import { ref, reactive, onMounted, computed } from 'vue';
const validate_token = ref(null); //获取短信时返回的验证值，登录时需要
const computedTime = ref(0); //倒数记时

// 值是对象,用reactive
const userInfo = reactive(null); //获取到的用户信息
//获取验证吗，线上环境使用固定的图片，生产环境使用真实的验证码
const getCaptchaCode = async function () {
    let res = await getcaptchas();
    captchaCodeImg.value = res.code;
};

onMounted(getCaptchaCode);
//判断手机号码
const rightPhoneNumber = computed(function () {
    return /^1\d{10}$/gi.test(phoneNumber.value);
});