Vue双向绑定实现原理

实现双向绑定需要Object.defineProperty，需要了解劫持对象的属性后获取对象的属性会触发get函数，更改对象属性值会触发set函数

代码语言：javascript复制

<div id="demo"></div>
<input type="text" id="inp">

代码语言：javascript复制

let obj = {}
let demo = document.getElementById("demo")
let inp = document.getElementById("inp")

Object.defineProperty(obj, 'name', {
  get() {
    console.log('已获取')
    return val
  },
  set(val) {
    console.log('已赋值')
    demo.innerHTML = val
  }
})
inp.addEventListener('input', e => {
  obj.name = e.target.value
})

代码语言：javascript复制

以上代码在input框输入内容时会给obj.name赋值就会触发set函数
在读取name属性例如let a=obj.name就会触发get函数并将return的值赋给a

object set 对象 函数

0 人点赞