【前端知识之Vue3】defineProperty和proxy的区别

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍defineProperty和proxy的区别。

---

一、Object.defineProperty

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象现有的属性，并返回此对象。defineProperty通过get和set实现响应式。

• get：属性的getter函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入this对象。该函数的返回值会被用作属性的值。
• set：属性的setter函数，当属性值被修改时，会调用此函数。该方法接收一个参数，会传入赋值时的this对象，默认为undefined。
• 定义一个响应式函数defineReactive

function update() {
   
    app.innerText = obj.foo
}

function defineReactive(obj, key, val) {
   
    Object.defineProperty(obj, key, {
   
        get() {
   
            console.log(`get ${
     key}:${
     val}`);
            return val
        },
        set(newVal) {
   
            if (newVal !== val) {
   
                val = newVal
                update()
            }
        }
    })
}

• 调用defineReactive，数据发生变化触发update方法，实现数据响应式。

const obj = {
   }
defineReactive(obj, 'foo', '')
obj.foo = "foo"  //可以触发响应式，因为触发了update函数，foo显示在了dom元素中。

• 在对象存在多个key情况下，需要进行遍历，如果存在嵌套对象的情况，还需要在defineReactive中进行递归，当给key赋值为对象的时候，还需要在set属性中进行递归。

function defineReactive(obj, key, val) {
   
    // 在对象存在多个key情况下，需要进行遍历
    observe(val)
    Object.defineProperty(