H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue双向绑定原理–简易实现过程

vue双向绑定原理–简易实现过程

  1. get/set
  2. 遍历属性
  3. 属性加get/set
class Observer {
    constructor(value) {
        this.value = value
        if (typeof value === "object") {
            this.walk(value)
        }
    }
    walk(obj) {
        const keys = Object.keys(obj)

        for (let i = 0; i < keys.length; i++) {
            defineReact(obj, keys[i])
        }
    }
}



function defineReact(deObj, key, val) {
    if (arguments.length === 2) {
        val = deObj[key]
    }
    if (typeof val === "object") {
        new Observer(val)
    }

    Object.defineProperty(deObj, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log("get")
            return val
        },
        set(v) {
            console.log("set")
            val = v
        }
    })
}
var a = new Observer({
    a: "1",
    b: {
        c: "12"
    }
});

结果为a.value中实现getset
打印结果为:
image.png

本文地址:H5W3 » 【前端技术】vue双向绑定原理–简易实现过程

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址