Vue2和vue3的区别

(1)vue2和vue3双向数据绑定的原理发生了改变, vue2双向数据绑定利用es5的一个API Object.defineProperty()使用get set进行监控属性(对数据进行劫持结合发布订阅模式来实现)，无法监听对象属性的增加删除和数组内部的变化 ；vue3中使用ES6的Proxy API对数据代理，深度监控对象，可以监听到对象的增加删除;
(2)Vue3支持碎片(Fragments)，可以在组件中放置多个根节点;
Vue2中，编写页面的时候，我们需要去将组件包裹在<div>中，否则报错警告
<template> <div> <header>...</header> <main>...</main> <footer>...</footer> </div> </template>
Vue3，我们可以组件包含多个根节点
<template> <header>...</header> <main>...</main> <footer>...</footer> </template> 
(3)Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API），Vue3组合API(Composition API)按需引入
Vue3举例:
const {createApp,onBeforeMount,onMounted, ref, reactive} = Vue
const app = createApp({
  setUp() {
// reactive声明复杂数据类型
const obj = reactive({a: 1});
const msg = ref(“hello world!”);
onBeforeMount(() => {
})
onMounted(() => {
})
}
})
// 延伸ref 和 reactive的区别?
ref 可以定义基本数据类型，也可以定义引用数据类型
reactive只可以定义引用数据类型；
ref被对象解析赋值、作为参数传递给函数，替换对象时都不会失去响应性，
而reactive会失去响应性
(4)建立数据的方式: vue2把数据放置到data中，vue3一般需要setup方法，该方法在组建初始化的时候触发
(5)生命周期钩子函数不同。Vue3没有beforeCreate created beforeDestory destoryed，新增了setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted