Vue2和Vue3的区别至少说6点

1.响应式系统

vue2是基于defineProperty拦截具体某个属性，

vue3基于的proxy才是真正的‘代理’

defineProperty对不存在的属性无法拦截，所以vue2中所有数据必须要在data里声明

Object.defineProperty 基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。

let obj = {};
let name = 'leo';
Object.defineProperty(obj, 'name', {
  enumerable: true,   // 可枚举（是否可通过 for...in 或 Object.keys() 进行访问）
  configurable: true,   // 可配置（是否可使用 delete 删除，是否可再次设置属性）
  // value: '',   // 任意类型的值，默认undefined
  // writable: true,   // 可重写
  get() {
    return name;
  },
  set(value) {
    name = value;
  }
});

Proxy Proxy 是 ES6 新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性。

2.自定义渲染器

vue2所有模块是混杂在一起的，不利于扩展

vue3将响应式，运行时的相关功能都拆成了独立模块，渲染的逻辑也拆成了‘平台无关渲染逻辑’+‘待定平台渲染API’（比如web开发就加入浏览器api）

3.生命周期

对于生命周期来说。整体上变化不大，只是大部分生命周期钩子名称上+‘on’，功能上是相似的，但是vue3在组合式api中使用生命周期钩子函数时需要先引入，vue2在选项api中可以直接调用生命周期钩子

// vue3
<script setup>     
import { onMounted } from 'vue';   // 使用前需引入生命周期钩子
 
onMounted(() => {
  // ...
});
 
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
  // ...
});
</script>
 
// vue2
<script>     
export default {         
  mounted() {   // 直接调用生命周期钩子            
    // ...         
  },           
}
</script> 

vue2和vue3常用的生命周期表：

注意：setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式的去定义

4.多根节点

熟悉 Vue2 的朋友应该清楚，在模板中如果使用多个根节点时会报错，

// vue2中在template里存在多个根节点会报错
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>
 
// 只能存在一个根节点，需要用一个<div>来包裹着
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

但是，vue3支持多个根节点，也就是frgment，多个节点的写法是被允许的

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

5.typeScript支持

vue3由typeScript重写，相对于vue2有更好的typeScript支持

vue2 options API中option是个简单对象，而typeScript是一种类型系统，面向对象的语法，不是特别匹配

vue2需要vue-propety-decorator增加更多结合vue特性的装饰器，写法比较繁琐

6.性能优化

vue3在渲染性能方面进行了许多改进，它引入了虚拟dom的静态提升和片段（Fragment）的支持，减少了渲染所需的额外开销。另外，vue3还对编译器进行了优化，生成了更小，更快的代码