Object.defineProperty()的理解

内容简介：-configurable属性：

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>

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优劣如何

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Text Processing in Python

David Mertz / Addison-Wesley Professional / 2003-6-12 / USD 54.99

Text Processing in Python describes techniques for manipulation of text using the Python programming language. At the broadest level, text processing is simply taking textual information and doing som......一起来看看《Text Processing in Python》这本书的介绍吧!

码农工具

Markdown 在线编辑器

HSV CMYK 转换工具

HSV CMYK互换工具