面试题-Vue2和Vue3的区别
https://img-blog.csdnimg.cn/b161eb27bad34615904c5600b4108e58.gif#pic_centerVue 2 和 Vue 3 之间存在许多重要的区别，这些区别涵盖了性能、API 计划、组合式 API（Composition API）、响应式体系以及构建工具等方面。以下是一些关键的区别，并附带代码示例来加以阐明。
1. 响应式体系
Vue 2 使用 Object.defineProperty 来举行数据劫持，它只能对对象的属性举行劫持，对于新增的属性大概数组的下标变动则无法监听。
Vue 2 示例：
// Vue 2 响应式数据
data() {
return {
message: 'Hello Vue 2!'
};
}
Vue 3 使用 Proxy 来实现响应式体系，它可以对对象举行更深条理的监听，包括新增属性和数组变动。
Vue 3 示例：
// Vue 3 响应式数据
import { ref } from 'vue';
setup() {
const message = ref('Hello Vue 3!');
// 可以通过message.value进行访问和修改
return {
message
};
}
2. 组合式 API (Composition API)
Vue 3 引入了 Composition API，答应我们更加灵活地构造组件逻辑。
Vue 2 示例 (Options API):
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
Vue 3 示例 (Composition API):
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
3. Fragment (碎片)
Vue 3 支持组件有多个根节点。
Vue 2 示例 (需要根节点):
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
Vue 3 示例 (可以没有根节点):
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
4. Teleport (传送门)
Vue 3 答应我们将模板的一部分“传送”到 DOM 树中的任何位置。
Vue 3 Teleport 示例:
<template>
<teleport to="body">
<div id="modal">...</div>
</teleport>
</template>
在这个例子中，<div id="modal"> 将被渲染到 <body> 的子节点中，而不是它原来的组件模板位置。
5. 性能改进
Vue 3 在许多方面举行了性能优化，好比编译优化、更快的组件初始化、更快的更新渲染等。由于这些优化是内部的，所以不会直接表现在代码上。
6. 移除或改变的功能
[*]$on, $off, $once 实例方法已被移除。
[*]filter 过滤器已被移除。
[*]v-model 在自界说组件上的举动有所改变，现在它默认使用 modelValue 作为 prop 和 update:modelValue 作为事件。
[*]异步组件的 API 有所改变。
7. 构建工具
Vue 3 官方推荐使用 Vite 作为构建工具，它比 Vue 2 中常用的 Webpack 构建速度更快。但你也可以在 Vue 3 中继续使用 Webpack。
8. TypeScript 支持
Vue 3 对 TypeScript 的支持更加完满，使得在 Vue 3 中使用 TypeScript 编写代码更加轻易和可靠。
您好，我是肥晨。
接待关注我获取前端学习资源，一样平常分享技能厘革，生存法则；行业内幕，洞察先机。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]