vue3x相对于2x常用的写法变化整理

以下关于vue3x项目创建到启动的一些变化，供大家参考，如果您准备使用3x版本作为项目开发，相关配置建议您升级到更高的版本，比如：

• 在3x版本中如果您使用element-ui，建议您选择element-plus，这是专门为vue3x定制的版本
• vue-router建议您升级到4.0版本以上，更好的兼容vue3x
• vuex建议您升级到4.0版本以上，更好的兼容vue3x
• 若您想在项目中使用sass，建议您安装sass和sass-loader即可，sass-loader版本建议在10.1.1版本，这样才能更好的兼容vue3x

/*安装element-plus*/
cnpm install element-plus -S
/*安装路由4.0版本以上*/
npm install vue-router@4
/*安装vuex4.0版本以上*/
npm install vuex@4
/*安装sass和sass-loader*/
npm install sass sass-loader@10.1.1

1、安装区别

/*2x vue项目脚手架安装方法*/
vue int webpack projectName

/*3x vue项目脚手架安装方法*/
vue create projectName

2、项目挂载区别

/*2x main.js挂载*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

/*3x main.js挂载*/
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

3、插件挂载和全局注册使用区别

/*2x 插件挂载和全局注册使用*/
import Vue from 'vue'
import App from './App.vue'
Vue.use(ElementUI, axios,animated)
/*2x注册全局插件使用prototype*/
Vue.prototype.$echarts = echarts
new Vue({
  render: h => h(App)
}).$mount('#app')

/*3x 插件挂载和全局注册使用*/
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
/*3x注册全局插件使用app.config.globalProperties*/
app.config.globalProperties.$echarts = echarts
app.use(ElementPlus,{locale})
app.use(router)
app.use(store)
app.mount('#app')

下面图片是vue2x和vue3x再项目挂载和插件使用上得一些api的变动

*4、路由注册创建区别

/*2x 路由注册创建*/
import Vue from 'vue'
import VueRouter from 'vue-router'
/*RouterPage 是我自己的路由管理文件*/
import RouterPage from './RouterPage/'
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
})
router.addRoutes([...RouterPage]);
export default router

/*3x 路由注册创建*/
import {createRouter,createWebHistory,createWebHashHistory} from  'vue-router'
import RoutersPage from '@/router/RouterPage/index'
import RouterBase from '@/router/RouterPage/base'
const router = createRouter({
  history:createWebHashHistory(),
  scrollBehavior: () => ({ y: 0 }),
  routes:[...RoutersPage,...RouterBase]
})
export default router

下面的图片是vue-router的3x和4x版本的api对应变化

5、vuex创建区别

/*2x vuex创建*/
import Vue from 'vue'
import Vuex from 'vuex'
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

/*3x vuex创建*/
import { createStore } from "vuex";
export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

项目创建配置到启动基本涉及这些需要注意的点，但是在使用过程中也有很多变化，比如：
在3x版本中如果 v-if 和 v-for 同时使用 v-if 的优先级永远是最高的，再比如：访问子组件的 this.$children方法被取消等等，这些在项目开发中经常用到，如果您有兴趣可以移步与官网更深入的学习，vue3x学习