面试官：vue2和vue3的区别

一、用组合式API替换选项式API

1、Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、watch、生命周期钩子等），导致代码的可读性变差；

2、Vue3 组合式API（Composition API），将代码统一逻辑代码聚合在一起，，增强了代码的可读性、内聚性；

二、生命周期

vue2	vue3	描述
beforeCreate	无，直接在setup中调用即可	生命周期执行的时候，data和methods中的数据都没有初始化，都不能被访问。
created	无，直接在setup中调用即可	data和methods都已初始化，可操作data中的数据
beforeMount	onBeforeMount	模板已经在内存中编译完成，但是未把模板渲染到页面中
mounted	onMounted	内存中的模板已经真实的挂在到页面中，用户可看到渲染好的页面
beforeUpdate	onBeforeUpdate	响应数据发送更新，界面没有更新，显示的数据仍然是旧的数据，页面尚未和最新数据同步
updated	onUpdated	页面和data数据一保持同步
beforeDestroy	onBeforeUnmount	组件销毁前触发，这时候上所有的 data 和 methods ， 指令， 过滤器等都是处于可用状态。还没有真正被销毁。
destroyed	onUnmounted	vue实例销毁，实例解除事件监听和dom绑定

• vue2

<script>
export default {
  components: {
  },
  data(){
    return{};
  },
  //生命周期写法
  created:{
    //通过this调用函数
    this.func();
  },
   mounted:{
  },
   beforeDestroy:{
  },
  methods: {
    func() {
        console.log("func");
    },
  },
}
</script>

• vue3

<script setup>
const func=()=> {
        console.log("func");
    },
 func();  //setup()即相当于created:  直接调用即可
 //其他声明周期
 import { onMounted } from 'vue'
onMounted(() => {
  console.log(`the component is now mounted.`)
})
// 注意可调用多个onMounted，依然按顺序执行，不会被覆盖，vue如果重复调用会被覆盖
onMounted(() => {
  // ...
});
</script>

三、 响应式原理（即Object.defineProperty()和[proxy代理]的区别）

• Vue2 是通过Object.defineProperty()的get和set来做数据劫持，结合发布订阅者模式来实现，Object.defineProperty()会去遍历每一个属性，给其添加get和set方法，从而达到数据的双向绑定。
• Vue3 使用ES6的proxy代理的方式来处理响应式;
• Object.defineProperty()和proxy代理的区别，即这两个分别怎么实现数据响应式原理，说白了就是怎么监听我们的属性；
• proxy解决了数组无法通过下标修改，无法监听到对象属性的新增和删除的问题。也提升了响应式的效率，vue3并不是完全抛弃了defineProperty，通过reactive定义的响应式数据使用proxy包装出来，而ref还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式；

1、Object.defineProperty(’对象‘，’属性名‘，’属性描述符‘)

• Object.defineProperty(’对象‘，’属性名‘，’属性描述符‘)是JavaScript中的一个方法，用于定义或修改对象的属性。它允许你精确地控制属性的特性(如可写性、可枚举性和可配置性)。
• 0bject.defineProperty是对象的方法，只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果属性值是对象，还需要深度遍历,
  0bject.defineProperty监听不到数组的变更的， Vue2.x的方法是重写数组的7个方法push、pop、shift、unshift等等‘

2、 Proxy

• Proxy可以理解成，在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，因此提供一种机制，可以对外界的访问进行过滤和改写。
• ES6 原生提供 Proxy构造函数，用来生成Proxy 实例。

//target参数表示所要拦截的目标对象，handler参数是一个对象，用来定制拦截行为
let proxy = new Proxy(target，handler);

(1) get方法
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和proxy实例本身(严格地说，是操作行为所针对的对象)，其中最后一个参数可选。

(2) set方法
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和Proxy实例本身，其中最后一个参数可选。

四、一些细节改变，例如

• 因为改成组合式API，所以没有this
• vue3中v-if高于v-for的优先级；
• 根实例的创建从new app变成了createApp方法；
• 一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是vue类调用；
• 新增了传送门teleport组件；
• template模板可以不包在一个根div里；
• 支持按需引入，可以更好tree-shaking；
• 性能优化，增加了静态节点标记。会标记静态节点，不对静态节点进行比对。从而增加效率（文本内容为变量会标记为1，属性为动态会标记为2，如果静态则不标记跳过比对）；
• vue3不推荐使用mixin进行复用逻辑提取， 而是推荐写成hook；
• v-model应用于组件时，监听的事件和传递的值改变；
• vue3更好地与ts配合；

待补充