前端培训丁鹿学堂：前端面试之vue2和vue3的区别

1 生命周期的变化

本质上没有区别，只是使用形式上有变化

1. vue2选项api可以直接调用，vue3组合式api需要先引入
2. api的关键词不同，大部分是vue2的前面加上on
3. 组件销毁的钩子函数名称变化较大，而created和beforeCreate在vue3中，因为有了setup函数而不再被需要：beforeDestroy=》onBeforeUnmount ，destroyed=》onUnmounted

<script setup>     
import { onMounted } from 'vue'

onMounted(() => {
  ...
})
onMounted(() => {
  ...
})
</script>

2 多根节点

在vue2中，template下面必须有一个根节点div，否则会报错警告。而vue3中不再需要，相当于少写了一层。

3 组合式api

Vue2 是 选项式API（Option API），一个逻辑会在文件不同位置（data、props、computed、watch、生命周期函数等）。Vue3 组合式API（Composition API）可是把所有的内容都放到setup函数中，需要按需引入。配合setup语法糖会变得更简洁。

4 响应式原理

vue2 响应式原理基础是Object.defineProperty；Vue3 响应式原理基础是 Proxy。
Object.defineProperty无法监听对象或数组新增、删除的元素。而 Vue2 方案是针对常用数组原型方法push、pop、shift、unshift、splice、sort、reverse进行了重写；提供Vue.set监听对象/数组新增属性。
而vue采用的proxy是ES6新特性，通过第2个参数handler拦截目标对象的行为。相较于Object.defineProperty提供语言全范围的响应能力，消除了局限性。但在兼容性上不支持ie11以下的版本，原因也很简单，ie11以下不支持proxy

5 更好的typescript支持

• Vue2 Option API中 option 是个简单对象，而TS是一种类型系统，面向对象的语法，不是特别匹配。
• Vue2 需要vue-class-component强化vue原生组件，也需要vue-property-decorator增加更多结合Vue特性的装饰器，写法比较繁琐。
• Vue3 由TS重写，相对于 Vue2 有更好地TypeScript支持。