vue2和vue3的区别这个问题在面试中问到的还挺多的，十个里边有七八个会问到这个问题，所以做一下总结，有不足或者错误的

前言

可能是因为我vue2和vue3.0都用过，所以这个问题在我面试中问到的还挺多的，十个里边有七八个会问到这个问题，所以做一下总结，有不足或者错误的地方可以提出

区别

响应式原理从definedProperty改成了proxy：vue2使用的是defineProperty去劫持数组做监听，vue3是使用proxy，不过也没有完全抛弃defineProperty,使用reactive定义响应式数据的时候是使用proxy，使用ref定义的数据还是使用definedProperty定义一个空对象，定义了一个value属性进行响应，这个改动解决了数组没办法通过下标修改，无法监听对象属性的新增和修改的问题
从选项时api改成组合式api的写法，方便按需引入：在 Vue2 中，全局API暴露在Vue实例上，即使未使用，也无法通过 tree-shaking进行消除,比较消耗性能和增加用户等待加载时间，vue3的按需引入，考虑了tree-shaking的支持，所以未使用的 api 将从最终的捆绑包中消除，让打包的体积更小

vue2写法
export default {
    props: {},
    data() {
      return {};
    },
    methods: {},
    computed() {},
    created() {
        
    },
    ....
  };
  
  
  vue3写法
  import {ref,onMounted} from 'vue'
  
  export default {
    props: {},
    setup() {
    //可以将不同的逻辑拆开成多个onMounted按照顺序执行，不会被覆盖
    onMounted(()=>{
    ...
    })
    const num=ref(1)
      return {
      num
      };
    },
    methods: {},
    computed() {},
  };

更好的配合ts：因为vue3本身就是使用ts写的，所以对于ts的支持更加友好
性能优化，增加了静态节点的标记：标记静态节点，在编译时不对比静态节点增加效率
vue3支持碎片化（即多个根节点），vue2不支持

vue2
<template>
  <div>
    <div></div>
    <div></div>
  </div>
</template>

vue3写法
<template>
    <div></div>
    <div></div>
</template>

beforeRouteEnter没有办法直接在setup语法糖中使用，因为setup函数中实例已经被创建出来了，而beforeRouteEnter的使用是在实例创造前，刚进入的时候，如果想要使用beforeRouteEnter就不能使用语法糖，在script标签中使用setup函数
v-model应用于组件时传递和监听的事件不一样：是vue2中传递的是value，监听的是change/input事件，而vue3中传递的是modelValue，监听的是update:modelValue事件
vue3不推荐使用mixin的写法，因为mixin更接近于组合式api的写法，容易与自身组件逻辑冲突，推荐使用hooks
Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置

总结

目前vue2已经停更，会有越来越多的公司选择使用vue3，所以还是早一点学习vue3更好