面试官：vue2和vue3的区别

一、用组合式API替换选项式API
- [1、Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、watch、生命周期钩子等），导致代码的可读性变差；](#1、Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、watch、生命周期钩子等），导致代码的可读性变差；)
- [2、Vue3 组合式API（Composition API），将代码统一逻辑代码聚合在一起，，增强了代码的可读性、内聚性；](#2、Vue3 组合式API（Composition API），将代码统一逻辑代码聚合在一起，，增强了代码的可读性、内聚性；)
二、生命周期
[三、响应式原理（即Object.defineProperty()和[proxy代理]的区别）](#三、响应式原理（即Object.defineProperty()和[proxy代理]的区别）)
- 1、Object.defineProperty('对象'，'属性名'，'属性描述符')
- [2、 Proxy](#2、 Proxy)
四、一些细节改变，例如

一、用组合式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

javascript 复制代码

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

vue3

javascript 复制代码

<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()来实现的响应式;
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 实例。

javascript 复制代码

//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配合；

待补充

面试官：vue2和vue3的区别

面试官：vue2和vue3的区别

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

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

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

二、生命周期

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

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

2、 Proxy

四、一些细节改变，例如

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