浅谈vue2与vue3的区别
原创
vue2与vue3的区别
响应式系统（Reactivity System）
Vue2
Vue 2 ：使用 Object.defineProperty 来实现数据的响应式。当你访问一个对象的属性时，它会触发 getter；修改属性时，会触发 setter。但是，Vue 2 的响应式系统在某些复杂情况下，比如添加新属性时，并不完全响应。
// Vue 2 响应式系统的示例
new Vue({
el: '#app',
data: {
message: 'Hello Vue 2'
mounted() {
// 使用 Vue.set 来新增响应式属性
this.$set(this.$data, 'newMessage', 'New Hello');
}
});Vue3
Vue3：使用 Proxy，允许对整个对象进行代理，而不是逐个属性定义 Proxy 和 setter。Proxy 可以拦截对象的各种操作（如属性读取、修改、添加、删除等），它能够自动跟踪对象的所有操作（包括对不存在的属性进行访问和修改）。因此 Vue 3 可以更好地处理动态添加的属性，性能也更好。
javascript
// Vue 3 响应式系统的示例
import { reactive } from 'vue';
const state = reactive({
message: 'Hello Vue 3'
});
state.newMessage = 'New Hello'; // 不需要使用 Vue.setAPI的选择
Vue2
Vue 2： 主要使用 Options API组件的逻辑组件通过使用特定的选项对象（如data、methods、computed、watch 等）来组织组件逻辑，每个选项负责一种特定的功能。对于简单组件，易于理解和使用；但组件变得复杂时，相关逻辑分散在不同的选项中，难以维护。
// Vue 2 使用 Options API
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++;
}
}
});vue3
Vue 3 ：引入了Composition API，通过 setup() 函数将组件逻辑组织在一起，将一个功能的所有代码集中起来处理,使得代码复用和可维护性提高。
// Vue 3 使用 Composition API
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
};组件模版和语法扩展
Vue2
Vue 2： 要求每个组件中必须只有一个根标签,否则会出错
. v-model 语法的变化
Vue 2 ：v-model 只能绑定 value 属性并触发 input 事件。
<!-- Vue 2 使用 v-model -->
<template>
<input v-model="message" />
</template>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>Vue3
Vue 3 ：支持 Fragment，允许组件返回多个根节点。
v-model 语法的变化
Vue 3 ：v-model 变得更加灵活，支持自定义属性和事件，可以通过 modelValue 和 @update:modelValue 来代替 value 和 input。
<!-- Vue 3 使用 v-model -->
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default {
props: {
modelValue: String
}
};
</script>生命周期钩子函数
Vue2
Vue 2： 采用传统的生命周期钩子，比如 created、mounted、updated、destroyed 等。
// Vue 2 生命周期钩子
new Vue({
el: '#app',
data: {
message: 'Hello'
},
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
}
});Vue3
Vue 3 ：生命周期钩子变成了函数，可以在 setup() 中直接使用，如 onMounted、onUpdated 和 onUnmounted 等。
// Vue 3 生命周期钩子
import { onMounted, ref } from 'vue';
export default {
setup() {
const message = ref('Hello Vue 3');
onMounted(() => {
console.log('Component mounted');
});
return { message };
}
};性能优化和模块化改进
Vue2
状态管理
Vue2：使用Vuex，通过 state、getters、mutations 和 actions 组织，采用单一的全局状态树，所有状态集中在一个地方，便于管理和调试。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: { 必须通过这里，确保状态的可追踪性
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});TypeScrip
Vue2：虽然可以使用 TypeScript，但支持不够完善，类型推断和类型检查较弱。
// Vue 2 TypeScript 示例
import Vue from 'vue';
export default Vue.extend({
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
});Teleport
Vue 2 ：没有内置的 Teleport 功能，我们需要手动处理模态框等组件的 DOM 位置。
Suspense
Vue 2：Vue 2 没有内置的 Suspense 支持，处理异步组件时需要手动处理 loading 状态。
// Vue 2 异步组件的实现
Vue.component('async-component', () => ({
component: import('./AsyncComponent'),
loading: LoadingComponent,
error: ErrorComponent,
}));Vue3
vue3：使用Pinia,允许多个 store 模块，支持模块化的状态管理，更加灵活。
import { defineStore } from 'pinia';
export const useMainStore = defineStore('main', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
},
getters: {
doubleCount: (state) => state.count * 2
}
});Vue 3：Vue 3 在设计时就全面考虑了 TypeScript 的支持，TypeScript 集成更加顺畅。
// Vue 3 TypeScript 示例
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
});Teleport
Vue 3： 引入了 Teleport，可以将组件内容渲染到 DOM 树的其他部分，常用于模态框、通知等场景。
<!-- Vue 3 使用 Teleport -->
<template>
<teleport to="body">
<div class="modal">This is a modal</div>
</teleport>
</template>Suspense
Vue 3 提供了 Suspense 组件，使得处理异步组件变得更加简单，自动展示加载状态。
<!-- Vue 3 使用 Suspense -->
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
components: {
AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent'))
}
};
</script>总结
Vue 3 相比 Vue 2 引入了许多重要的新特性和性能优化，在多个方面进行了显著的改进，增强了性能、灵活性和可维护性，特别是在响应式系统、API 设计和 TypeScript 支持等方面。这些改进使得 Vue 3 更加灵活、强大，适合现代 Web 应用的需求。这些特性使我们在开发大型应用时能够编写更简洁、易维护且高效的代码。
本文由“云萌工作室-前沿技术基础”专栏提供，关注更多编程技巧与知识。
@Author: L_NQ
@Date: 2024/12/13
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
