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优劣如何
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。