Vue2和Vue3的区别

前言：这个也算老生常谈了，经常在面试中被问到的问题😂😂，其实基本上就是性能、Ts支持、响应式、优化等基本的区别吧

数据双向绑定原理

1. Vue2使用的是Object.defineProperty()进行数据劫持，结合发布订阅的方式实现。
2. Vue3使用的是Proxy代理，使用ref或者reactive将数据转化为响应式数据

使用proxy代理的优势

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作，通过Proxy可以直接拦截所有对象类型数据的操作。

数据和方法的定义

1. Vue2使用的是选项类型API（Options API），Vue3使用的是合成型API（Composition API）

2. Vue2：

   data() { return {}; }, methods:{ }

3. Vue3：

   数据和方法都定义在setup中，并return出来，在vue3中this是undefined，所以在setup中不能用this

生命周期

vue2	vue3	说明
beforeCreate	setup()	组件创建之前
created	setup()	组件创建完成
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成
beforeUpdate	onBeforeUpdate	数据更新，虚拟DOM打补丁之前
updated	onUpdated	数据更新，虚拟DOM渲染完成
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁后
activated	onActivated
deactivated	onDeactivated

指令与插槽

1. vue2中使用slot可以直接使用slot,而vue3中必须使用v-slot的形式
2. v-for与v-if在vue2中优先级高的是v-for指令，vue3中v-if优先级更高
3. vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes
4. vue3中移除v-on.native修饰符
5. vue3中移除过滤器filter
6. vue3在组件模板<template/>中，不需要跟根节点<div/>，就是说在组件可以拥有多个根节点。

Composition API (组合API)

Vue2和Vue3最大的区别就是Vue3使用了Composition API (组合api)

Vue2:

<script>
export default {
	// 数据
    data() {
        return {};
    },
    mounted() {},
    // 方法
    methods: {},
    computed: {},
    components:{}
};
</script>

Vue3:

这样代码会更加简洁和整洁。
<script>
export default {
    setup() {
        // 数据 和 方法都在setup里面使用
    }
};
</script>

全局API改动

2.x 全局 API	3.x 实例 API (app)
Vue.config	app.config
Vue.config.productionTip	removed 已移除
Vue.config.ignoredElements	app.config.isCustomElement
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.version	app.version
Vue.filter	removed 已移除
Vue.prototype	app.config.globalProperties
Vue.extend	removed 已移除

app通过createApp方法创建。

import { createApp } from "vue";

const app = createApp(App);

总结

• vue经历从2.0到3.0更新之后，简而言之就是变得更轻，更快，有更好的TypeScript支持，使用起来更加方便