1.Object.defineProperty

Object.defineProperty(obj, prop, descriptor)MDN描述：obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符。
  • writable属性：

    是否可以被重写： 默认值为true 当属性值为false时，修改无效;
    当writable属性值为false，对prop做出修改是在严格模式下会报错;

-configurable属性：

对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改；
  • enumberable 是否可以被枚举，for in 或者 Object.keys()
  • set 和 get 属性 默认为undefined

  • 直接声明和用Object.defineProperty()的区别

     let obj = {   a: 12  // 其他的属性都为true } Object.defineProperty(obj, 'b', {   value: 15 //其他的属性都为false })

  • 实现简易的双向绑定：

       <body> <input type="text" name='' value="" id="ipt"> 您输入的值是<span id='txt'></span>

    </body>
    <script>

     window.onload = () => {   const obj = {}   Object.defineProperty(obj, 'text', {     get() {       return text     },     set(newVal) {       document.getElementById('ipt').value = newVal       document.getElementById('txt').innerHTML = newVal     }   })   let input = document.getElementById('ipt')   input.addEventListener('keyup', (e) => {     obj.text = e.target.value   }) }

2.Vue双向绑定的原理

  • vue数据双向绑定的原理： 数据劫持加发布订阅者的模式，针对对象或者对象属性的一些变化，通知订阅者，通过Compile来解析编译模板指令，再通过watcher进行数据的更新渲染。
  • Vue中Object.defineProperty()的缺点：

    不能监听数组的变化：当你利用索引设置一个元素，或者修改数组长度这些操作并不是响应式的；

  • 展望ES6的新特性Proxy

    let p = new Proxy(target, handler)

    通俗的理解，在对象之前设一层拦截，要对目标对象做的相应的处理，必须通过这层拦截，他可以对外部的处理做一些过滤和操作；

    proxy的优点有多达13种数据劫持的方法，缺点就是兼容性问题。

    参考：vue3.0 尝鲜 -- 摒弃 Object.defineProperty，基于 Proxy 的观察者机制探索
    实现双向绑定Proxy比defineproperty优劣如何