vue2与vue3的区别

1.双向绑定原理不同
Vue2使用的是Object.defineProperty，而Vue3使用的是Proxy

Vue2组件中所有data里面定义的数据默认都被重置为响应式数据

Vue3则新增了ref/reactive可以自定义变量的响应式类型，区分了常量跟响应式变量的区别

2.API设计类型不同 
Vue2使用的是选项式API

Vue3则使用的是组合式API  setup

在大型项目中，组合式API更方便，使用时更直观

3.增强功能不同
Vue3支持碎片化Fragments，即每个组件支持多个根节点

Vue2只支持一个根节点

4.底层语言不同
Vue3用的都是Typescript，规范化更好

5.适配的UI组件库不同
element-plus是一款专门支持Vue3框架而建立的UI库

而Vue2只支持element-ui

6.混入Mixin
Vue3中利用hooks函数提高代码的复用性

Vue2则是利用mixins来分发组件中重复的功能

7.生命周期的钩子函数不同
Vue2生命周期        Vue3生命周期
beforeCreate          一致

created                   一致
beforeMount           一致

mounted                 一致

beforeUpdate         一致

updated                  一致

activated                一致（当使用到keep-alive组件时使用）

deaactivated          一致（当使用到keep-alive组件时使用）

beforeDestory        beforeUnmount

destroyed               unmouted

8.API中的watch进行了升级
1.Vue2中watch只能监听一个值的变化，而Vue3中的watch可以监听多个值的变化；

2.Vue3中新增了watchEffect，用于监听页面所有响应式变量的值；

3.Vue3中监听对象的属性值需要使用() => obj.property的方式；

// 监听对象的属性值，需要用handle函数的形式
watch(() => obj.property, (val) => {
  console.log(obj.property);
});
import { reactive, watch } from "vue";
 
let employeeMsg = reactive({
  name: "Zhang San",
  age: 28
});
 
const changeEmployee = () => {
  employeeMsg.name = "Li Si";
  employeeMsg.age = 32;
};
 
changeEmployee();
 
// 监听employeeMsg对象
watch(employeeMsg, (newVal, oldVal) => {
  console.log("姓名：" + employeeMsg.name);
  console.log("年龄：" + employeeMsg.age);
}, { deep: true });
 
// 监听多个值的变化
watch([
  () => employeeMsg.name,
  () => employeeMsg.age
], ([nameVal, ageVal]) => {
  console.log("姓名：" + nameVal);
  console.log("年龄：" + ageVal);
});