vue 双向绑定的基本原理

最新推荐文章于 2025-12-20 09:26:15 发布

转载最新推荐文章于 2025-12-20 09:26:15 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.51cto.com/13132323/2502295

文章标签：

#vue #python #object #类 #js

本文详细解析了Object.defineProperty方法，展示了如何使用其set和get描述符来实现数据绑定和响应式更新，通过一个输入框实时更新对象属性的例子，阐述了其在前端开发中的应用。

首先了解一下Object.defineProperty

object.defineProperty(obj, prop, descriptor)有三个参数

-- obj
    要定义属性的对象。
-- prop
    要定义或修改的属性的名称或 symbol。
--descriptor
    要定义或修改的属性描述符。
--这里主要用到两个属性描述符
    get： 当访问该属性时，会调用此函数。但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
    set:   当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。

// html
<input type="text" id="txt" />
// js
let obj = {}
let temp = ''
let message = document.querySelector('input')
message.oninput = function(){
    obj.name = this.value
    console.log(obj.name)
}
// m => v
Object.defineProperty(obj, 'name', {
    set(value){
        temp = value
        message.value = value
    },
    get(){
        return temp
    }
})