vue2和vue3的区别

1、vue2是选项式API，vue3是组合式API

vue2是选项是api，所以，我们把所有的methods,data,watch,computed等等，都放在vue实例下面

vue3是组合式api,所有的这些东西，都放在setup中

使用setup时需要注意：  
  1. 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
  
  2. 由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined
  
  3.setup函数只能是同步的不能是异步的
  
  4.页面中使用setup中的数据，不是一个响应式的
  
  5.setup的数据需要return出去

2.生命周期不同

在setup中使用生命周期钩子函数，setup() :开始创建组件之前在beforeCreate和created之前执行。创建的是data和method，在beforeCreate和created之前执行。

如果我们把两种生命周期函数都释放出来的话，我们会发现

选项式api的生命周期函数，没有setup中声明周期函数执行的快

options api【vue2】	options api【vue3】	setup api 【vue3️⃣】
	（选项式API）	setup()
beforeCreate	beforeCreate	not needed ❌
created	created	not needed ❌
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestory	beforeUnmount	onBeforeUnmount
Destoryed	unmounted	onUnmounted

3.组件缓存使用的方法不同

vue2中的使用方法

 <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

vue3中使用方法

 <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
 </router-view>

4.vue3新增了语法糖

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default

5.v-for和v-if的优先级不同

vue2中v-for比v-if优先级高 vue3中 v-if比v-for优先级高

6.this执行

在 Vue 2 中，组件中的常规函数默认使用传统的函数方式定义，因此函数中的 this 指向该函数所在的对象，也就是组件。

在 Vue 3 中，如果您需要访问当前组件的实例，可以使用新的 getCurrentInstance() 全局 API。

vue3的proxy相当于this

但在 Vue 3 中，this 引用的是一个由 Proxy 封装的对象。

Vue 3 采用 Proxy 对对象进行劫持和代理，以实现响应式的数据绑定，这是 Vue 3 的核心特性。

通过使用 Proxy，Vue 3 能够监听组件实例的数据、属性和方法的变化，并在变化时触发相关更新。

因此，在 Vue 3 中，获取到的 this 对象实际上是一个 Proxy 对象，它拦截了对组件实例的属性和方法的访问，从而实现了数据的响应式更新。这样的设计使得 Vue 3 在性能和开发体验方面有了很大的提升。

7.vue2和vue3的双向数据绑定原理不同

vue2是通过使用Object.definePropetry（）对数据进行劫持结合发布者订阅者模式来实现。

vue3是通过ES6中的 proxy对数据进行处理

Vue3 使用数据代理的优势有以下几点：

1）definePropert 只能监听某个属性，不能对整个对象进行监听

2）可以省去for in，闭包等内容来提升效率（直接绑定整个对象即可）

3）可以监听数组，不用再单独的对数组做特异性操作，Vue3可以检测到数组内部数据的变化

8.计算属性不同

Vue 2和Vue 3的计算属性在语法上有所不同，Vue 3使用computed函数并需要手动获取响应式数据的值。

在Vue 2中，计算属性是通过computed选项定义的，它可以缓存计算结果，并在依赖的响应式数据发生变化时自动更新

Vue 2中，watch选项用于监听数据的变化，并在数据变化时执行相应的操作。

在 Vue 3 中，除了计算属性，还引入了一个新的响应式 API：ref 和 reactive。计算属性在 Vue 3 中仍然存在，并且与 Vue 2 中的计算属性相同，但是引入了一个新的 API：computed。

在 Vue 3 中，computed 返回一个包含 get 和 set 函数的对象。与 Vue 2 中的计算属性不同，这个 get 函数会被立即执行，并且不会被缓存。每次 computed 依赖的值变化时，get 函数都会被重新执行。这使得 computed 更加具有响应性。

另外，Vue 3 中的另一个新特性是 watchEffect，它可以让您在响应式依赖项变化时立即执行副作用。如果您想在响应式变量变化时执行一个副作用而不需要返回一个值，则 watchEffect 可能会更适合您的需求。

9.数据监听不同

vue2 是对data中的所有数据 都进行了实时数据监听效率低

vue3中为了节约资源，并不是全部数据都会进行响应式监听。他允许用户进行动态监听。

因此在vue3中主要用reactive和ref进行响应数据的监听。他俩的区别在于：

①reactive中必须存放对象（json、数组等），不能存放基本数据类型

②ref则可以存放基本数据类型【注：ref本质还是reactive】

结论：

ref可以让普通的变量变为响应式的

reactive可以让对象,数组等复杂数据类型，也就是 引用数据类型变为响应式的

10，watch 监听不同

vue3中使用watch，接受三个参数 ，分别是监听对象，执行的回调函数，配置是否立即监听

   import { watch } from 'vue'
​
   watch(source, callback, options)

在vue2中，数据可以正常进行监听

但是在vue3中，watch监听reactive定义的响应式数据全部属性时：

无法监听到老的数据，只能获取修改后的最新数据

强制开启了深度监听,但是可以通过deep：false 进行关闭

vue3中，使用watch监听ractive包裹的响应式数据某个属性内部的属性变化

即：我们监听的属性值是一个对象，如果当前对象内部的属性发生变化时 此时，我们需要开启deep,但此时oldVal无法正常获取

11. $attrs改动

vue3: $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style 。

vue2: 不包含 class 和 style

12. $children

vue3: 已经被移除

13.ref的使用

vue2中，可以在当前组件中，通过this.$refs.ref的值 获取当前组件内一切的元素 或者绑定了ref属性的子组件。

同时，可以通过this.$refs获取子组件的实例，来获取子组件上具备的一切属性和方法

在vue3中，通过ref获取子组件实例的时候，只能获取到子组件通过expose暴露的属性或方法。父组件通过ref 无法获取到 非 defineExpose 包裹的数据

14.路由构建不同

vue2 是通过 构造函数 vueRouter创建路由器

路由模式通过mode设置，值分别为hash和history

vue3是通过方法 createRouter创建

createRouter 接收一个对象作为参数

作为参数的这个对象，有两个属性，history配置路由的模式

如果想把路由模式设置为hash模式，需要把history属性的值设置为: createWebHashHistory ()

如果想把路由模式设置为history模式，需要把history属性的值设置为: createwebHistory ()

vue2中的history模式，vue3中 createWebHistory（）
vue2中的hash模式，vue3中createWebHashHistory（）

15.创建模板不同

vue 3中创建组件通过组件模板defineComponent 生成一个vue实例

vue2必须有一个根节点，vue3不需要

1. 组件模板中，vue3不在需要根节点

2. vue2是直接把vue选项对象 ，暴露出去

vue3通过defineComponent传入组件，生成一个vue实例

1. vue3中创建vue实例通过createApp创建的

vue2通过vue创建

vue2中Vue是一 个构造函数

vue3中 createApp 是一个方法