ObjectdefineProperty的理解

jiezi

6 年前

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})
 }

vue 数据双向绑定的原理：数据劫持加发布订阅者的模式，针对对象或者对象属性的一些变化，通知订阅者，通过 Compile 来解析编译模板指令，再通过 watcher 进行数据的更新渲染。
Vue 中 Object.defineProperty()的缺点：
不能监听数组的变化：当你利用索引设置一个元素，或者修改数组长度这些操作并不是响应式的；
展望 ES6 的新特性 Proxy
```
let p = new Proxy(target, handler)
```
通俗的理解，在对象之前设一层拦截，要对目标对象做的相应的处理，必须通过这层拦截，他可以对外部的处理做一些过滤和操作；

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

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

ObjectdefineProperty的理解

1.Object.defineProperty

2.Vue 双向绑定的原理