Vue3 和 Vue2 的区别

1. 建立工程

这个用脚手架（vue-cli）没啥区别，就是选版本的时候选 vue3 就好了。

2. package.json

vue3:

  "dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^2.3.7",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.18",
    "@vue/cli-plugin-router": "~4.5.18",
    "@vue/cli-plugin-vuex": "~4.5.18",
    "@vue/cli-service": "~4.5.18",
    "@vue/compiler-sfc": "^3.0.0",
    "axios": "^1.4.0",
    "jquery": "^3.7.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.21"
  }

vue2:

"dependencies": {
    "core-js": "^3.6.5",
    "echarts": "^5.4.3",
    "element-ui": "^2.15.6",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.18",
    "@vue/cli-plugin-router": "~4.5.18",
    "@vue/cli-plugin-vuex": "~4.5.18",
    "@vue/cli-service": "~4.5.18",
    "axios": "^1.4.0",
    "jquery": "^3.7.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.21",
    "vue-template-compiler": "^2.6.11"
  }

3. main.js

vue3:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入ElementPlus
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn' ;

//createApp(App).use(store).use(router).mount('#app')
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app');

vue2:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.路由文件（router目录 下的 index.js）

vue3:

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const basicRoutes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const routes = [...basicRoutes] ;

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
 

vue2:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const basicRoutes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const routes = [...basicRoutes] ;

const router = new VueRouter({
  routes
})

export default router

5. vuex配置（store目录下的index.js）

vue3:

import { createStore } from 'vuex'

export default createStore({
  state: {
      count:0,
      scores:[1,2,3,4,5,6,7,8,9]
  },
  getters: {
         
  }, 
  mutations: { // 修改器，改state的数据
      
  },
  actions: { // 动作 调用 修改器 ， 修改器 改 state 
     
  },
  modules: { // 模块
  }
})
 

vue2:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0,
      scores:[1,2,3,4,5,6,7,8,9]
  },
  getters: {    
       
  }, 
  mutations: { // 修改器，改state的数据
     
  },
  actions: { // 动作 调用 修改器 ， 修改器 改 state 
      
  },
  modules: { // 模块
  }
})

6. vue页面中的写法的变化

（1）vue3 是兼容 vue2的写法的因此会vue2根本不用急，按原写法是没有问题的。

只是要注意一点，vue3不支持过滤器（filters）要用 computed 代替。

（2）vue3不再强调只有1个根节点，可以不用根div把template中的代码包起来了。

（3）vue3新增了 setup的方法（把原来分散的定义的属性和方法集中了起来），

具体代码演示如下：

<script>
    import { ref, reactive } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    import { useStore } from 'vuex';
    
    export default {
        name: 'Vt2',
        setup(){
            // 定义变量
            const route = useRoute();
            const store = useStore();
            
            // 接收路由参数
            const id = ref(route.query.id);
            const title = ref(route.query.title);
                   
            // 定义方法
            const changeCount = () => {
                store.dispatch("count");  
            };
            const jump = () => {
                router.push({
                      path:"/vt2",
                      query:{
                        id:1,
                        title:'good good study'          
                       }
                    });
            }
            
            // 返回 （必须写不然调不到）
            return {
                id,
                title,
                changeCount,
                jump
            }            
        }
    }
</script>
 

7.前面介绍写法上的区别，下面水一下理论上的区别吧：

（1）响应式原理：

       Vue2使用ES5的Object.defineProperty API进行数据劫持，并结合发布-订阅模式来实现响应式。然而，这种实现方式存在某些限制，例如无法监听到对象属性的新增和删除，以及数组直接修改下标对应的元素或修改数组的length属性。相反，Vue3采用了ES6的Proxy API来实现响应式，从而解决了上述问题。这种新的响应式原理使得Vue3在数据追踪和更新方面更加灵活和高效。
是否支持碎片：Vue2不支持碎片（Fragments），即每个组件只能有一个根节点。而Vue3则支持碎片，允许组件拥有多个根节点。这一变化使得组件的结构更加灵活，能够更好地适应复杂的UI需求。

（2）API类型：

         Vue2主要使用选项类型API（Options API），这种API将组件的不同属性（如data、computed、methods等）分割成不同的选项。而Vue3则引入了组合式API（Composition API），该API允许开发者更灵活地组织和共享代码逻辑。此外，Vue3还保留了选项类型API，以提供向后兼容性。

（3）定义数据变量和方法：

        在Vue2中，数据变量通常定义在data函数中，而方法则定义在methods对象中。而在Vue3中，通过使用reactive函数和setup方法，开发者可以更加灵活地声明和返回响应性数据，使得数据和方法的定义更加直观和易于维护。

（4）生命周期钩子函数：

        Vue2和Vue3在生命周期钩子函数方面也存在差异。Vue2提供了一系列的生命周期钩子函数，如created、mounted、updated等。而Vue3在保留这些钩子函数的同时，还增加了onRenderTracked和onRenderTriggered等新的钩子函数，以提供更多的控制和灵活性。
父子传参：在Vue2中，父子组件之间的参数传递主要通过props和事件（如$emit）来实现。而在Vue3中，虽然这种方式仍然有效，但通过使用provide和inject API，开发者可以更容易地实现跨组件的状态共享和依赖注入。

（5）指令与插槽：

        Vue2和Vue3在指令和插槽的使用上也存在一些差异。Vue3对指令系统进行了重构，使得指令的执行更加高效和灵活。同时，Vue3还引入了新的插槽语法（如v-slot），使得插槽的使用更加简洁和直观。