2025年vue2和3什么区别（vue2.x和vue3.x的区别）

大家好，我是讯享网，很高兴认识大家。

核心方法

vue2.x，通过Object.defineProperty()，遍历循环劫持所有数据

vue3，通过proxy（），可以直接监听对象

diff算法

vue2.x，在数据发生变化时，会生成一个虚拟dom，并和旧的虚拟dom进行对比，这个对比时全量对比，每个节点都会进行比对

vue3，在数据变化时，会生成一个虚拟dom，且为哪些不会发生变化的节点添加静态标记，在与旧虚拟dom对比时，会忽略静态标记的内容，提升速度

创建和挂载方式

vue2.x挂载

import Vue from ‘vue’ import App from ‘https://blog.51cto.com/u_15127623/App’ import store from ‘https://blog.51cto.com/u_15127623/store’ import router from ‘https://blog.51cto.com/u_15127623/router’ new Vue({ el: ’#app’, router, store, render: h =&gt; h(App) })

讯享网

讯享网import { createApp } from ‘vue’ import App from ‘https://blog.51cto.com/u_15127623/App.vue’ import router from ‘https://blog.51cto.com/u_15127623/router’ import store from ‘https://blog.51cto.com/u_15127623/store’ const vm = createApp(App) vm.use(store).use(router).mount(’#app’);

组件创建

vue2.x

&lt;template&gt; &lt;div /&gt; &lt;/template&gt; &lt;script&gt; export default { name: “, data() { 讯享网</span><span>return</span><span> { } 
 } } &lt;/script&gt;

&lt;template&gt; &lt;div /&gt; &lt;/template&gt; &lt;script&gt; import { defineComponent } from ‘vue’ export default defineComponent({ name: ”, setup() { 讯享网</span><span>return</span><span> { } 
 } }) &lt;/script&gt;

全局变量

vue2.x

//main  Vue.prototype.$xxx=‘xxxx’
讯享网 //其他组件 this.$xxx

讯享网var app=createApp(App) app.config.globalProperties.$xxx=‘xxx’ //组件内使用 import { getCurrentInstance } from ‘vue’ const { proxy } = getCurrentInstance() const sysName = proxy.$systemName

生命钩子

vue2.x

&lt;script&gt; export default { name: “, data() { 讯享网</span><span>return</span><span> { } 
 }, beforeCreate(){ //初始化前  }, created(){ //初始化  },
 actived(){
 //keep-alive 
 },
 deactived(){

 }, beforeMounte{ //挂载前  }, mounted(){ //挂载  }, beofreUpdate(){ //数据更新前  }, update(){ //数据更新  }, beforeDestroy(){ //销毁前  }, destroy(){ //销毁  } } &lt;/script&gt;

&lt;script&gt; import { defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from ‘vue’ export default defineComponent({ name: ”, setup() { 讯享网 onMounted(() </span>=&gt;<span> { console.log(</span>'mounted!'<span>) }) onUpdated(() </span>=&gt;<span> { console.log(</span>'updated!'<span>) }) onUnmounted(() </span>=&gt;<span> { console.log(</span>'unmounted!'<span>) }) </span><span>return</span><span> { } 
 } }) &lt;/script&gt;

其他不同

1，变量定义

vue2.x，直接在data（）{ return { }} return里的对象放置属性即可

vue3，在setup里，需要在vue里引入ref和reactive来分别定义基础类型和引用类型，再return

2，props，emit，slots，attrs

vue2.x, props在注册完毕后，可以直接通过this.xxx来调用数据，emit，slots，attrs这些直接通过this.$emit,this.$slots,this.$attrs使用

vue3， props在注册完毕之后，可以在setup里参数获取

setup (props，{emit，slots，attrs}){ }

3，router的创建

vue2.x

讯享网import Vue from ‘vue’ import Router from ‘vue-router’ Vue.use(Router) const routes=[ ] const createRouter = () =&gt; new Router({ mode: ‘hash’,//history  routes: routes }) const router = createRouter() export default router

import { createRouter,createWebHashHistory} from “vue-router”; const routes = [ ] export const router = createRouter({ history: createWebHashHistory(), routes: routes })

4,router的使用

vue2.x 直接使用this.$router和this.$route使用

vue3，需要从vue-router引入 useRoute userRouter两个函数的实例来使用

5，store的创建

vue2.x

讯享网import Vue from ‘vue’ import Vuex from ‘vuex’ import appStore from ‘https://blog.51cto.com/u_15127623/appStore’ Vue.use(Vuex) consot modules={} const store = new Vuex.Store({ modules:{ appStore } }) export default store

import { createStore } from ‘vuex’ import appStore from ‘https://blog.51cto.com/u_15127623/appStore’ export default createStore({ modules: { 讯享网appStore 
 } })

5，store的使用

vue2.x，直接通过this.$store.xxx使用

vue3.x，需要从vuex引入useStore，const store=useStore（）

2025年vue2和3什么区别（vue2.x和vue3.x的区别）

相关推荐