【面试题】Vue3

# 1. 比较Vue2与Vue3的响应式（对比Proxy与defineProperty）*

vue2的响应式原理：Object.definePrototype

const a = {
    name: 'hello',
    age: 12
}

const b = {}

Object.defineProperty(b, 'name', {
    get(){
        return a.name
    },
    set(value){
        a.name = value
    }
})

缺陷：

1. 每一个属性都得绑定
2. 新增属性，删除属性，页面不会更新（所以需要Vue.set,Vue.delete）
3. 直接通过下标修改数组，界面不会自动更新（需要用重写的7个数组方法更新）

vue3的响应式原理：Proxy、Reflect

const person = {
    name: 'mike',
    age: 12
}

const p = new Proxy(person,{
    get(target,propName){
        console.log('读取了某个属性',target,propName)
        return Reflect.get(target,propName)
    },
    set(target,propName,value){
        console.log('修改了某个属性',target,propName,value)
        Reflect.set(target, propName, value)
    },
    deleteProperty(target,propName){
        console.log('删除了某个属性', target, propName)
        return Reflect.deleteProperty(target, propName)
    }
})

优点：

1. 可以获取每个属性的监听
2. 有deleteProperty方法，可以监听到属性的所有操作
3. 利用Reflect返回值的特性，使用if来简化之前的try&catch异常捕获流程，更清晰

# 2. vue3的新特性

组合式API

01、setup

• setup() 钩子是在组件中使用组合式 API 的入口
• 组件用到的数据，方法均配置在setup中
• setup函数两种返回值：
  • 若返回一个对象，则对象中的属性和方法均可在模板中直接使用
  • 若返回一个渲染函数，则可以自定义渲染内容
• 执行时机：在beforeCreate之前执行一次，this是undefined
• setup参数
  • props：值为对象
  • context：上下文对象
    • attrs：值为对象，包含组件外部传进来的，但没有在props配置中声明的属性，相当于this.$attrs
    • slots：收到的插槽内容，相当于this.$slots
    • emit：分发自定义事件的函数，相当于this.$emit

02、ref

• 定义一个响应式的数据
• 可以是基本类型数据（响应式依然是靠Object.definePrototype）
• 也可以是对象类型（内部求助了reactive函数）
• 操作数据需要.value

03、reactive

• 定义一个对象类型的响应式数据
• 返回一个代理对象（proxy对象）
• reactive定义的响应式数据是“深层次的”
• 操作数据不需要.value

# 3. ref与reactive的基本实现*

# 4. 利用自定义ref实现防抖