vue 双向绑定的基本原理

Posted 2020-12-09

首先了解一下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
    }
})