// Object.defineProperty的第一个缺陷,无法监听数组变化 如这种数组改变方式 list[0] = xx; 对象的话是 var obj = {a: 1} obj.b = 2; Vue.set() / this.$set() /* 以下八种方法Vue是可以检测到数组变化的进行了数组方法重载 push() pop() // 删除并返回数组的最后一个元素 shift() // 把数组的第一个元素从其中删除,并返回第一个元素的值 unshift() // 向数组的开头添加一个或更多元素，并返回新的长度 splice() sort() reverse() */
// 这是将要被劫持的对象
const obj = { name: 'bob', age: 25 }; function test(age) { if (age === 25) { console.log('这是我的年龄'); } else if (age > 25) { console.log('油腻大叔'); } else { console.log('风花雪月的日子一去不复返了'); } } // 遍历对象,对其属性值进行劫持
Object.keys(obj).forEach(function(key) { // 语法 Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对象。prop 要定义或修改的属性的名称或 Symbol, descriptor要定义或修改的属性描述符。
/*描述符默认值汇总 拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。 属性值和函数的键 value、get 和 set 字段的默认值为 undefined */ Object.defineProperty(obj, key, { enumerable: true, // 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false
configurable: true, // 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除，默认false。
get: function() { console.log('get'); }, set: function(newVal) { // 当属性值发生变化时我们可以进行额外操作
console.log(`新值${newVal}`); // document.getElementById('input').value = newVal; // 例如双向绑定原理 输入框的 e.target.value;
test(newVal) } }) }) obj.age = 26; console.log(obj.age, 'obj.age') /* 输出结果 新值26 油腻大叔 get undefined "obj.age" */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>es6</div>
<div id="app">
<input type="text" id="input" />
<div>输入框的值： <span id="title"></span></div>
<button type="button" name="button" id="btn">添加到list</button>
<ul id="list"></ul>
</div>
<script type="text/javascript">
/* Object.defineProperty() 的问题主要有三个 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌套的对象 */
// Proxy语法糖 优势 解决了vue2.0 Object.defineProperty 没解决的几个问题 Proxy 的第二个参数可以有 13 种拦截方法
// target:[目标值], key:[目标的key值], value:[要改变的值], receiver:[改版前的原始值]
/* 针对对象:针对整个对象,而不是对象的某个属性 支持数组:不需要对数组的方法进行重载，省去了众多 hack 嵌套支持（本质也是不支持嵌套的）: get 里面递归调用 Proxy 并返回 */
// 劣势:Proxy 的兼容性不如 Object.defineProperty() 不能使用 polyfill 来处理兼容性
// var proxy = new Proxy(target, handler);
const obj = {}; const inp = document.getElementById("input"); const title = document.getElementById("title"); // 监听对象
// Reflect.get():获取对象身上某个属性的值，类似于 target[name]。
// Reflect.set():将值分配给属性的函数,返回一个Boolean，如果更新成功，则返回true。
const newObj = new Proxy(obj, { get: function(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); // Reflect.get 和 Reflect.set 可以理解为类继承里的 super，即调用原来的方法
}, set: function(target, key, value, receiver) { console.log(target, key, value, receiver, '对象劫持'); if (key === "text") { inp.value = value; title.innerHTML = value; } return Reflect.set(target, key, value, receiver); } }); inp.addEventListener("keyup", function(e) { newObj.text = e.target.value; }); // 渲染list列表
const render = { // 初始化
init: function(arr) { // document.createDocumentFragment 创建一个新的空白的文档片段因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。
// 因此，使用文档片段通常会带来更好的性能
const fragment = document.createDocumentFragment(); for (let i = 0; i < arr.length; i++) { const li = document.createElement("li"); li.textContent = arr[i]; fragment.appendChild(li); } list.appendChild(fragment); }, addItem: function(val) { const li = document.createElement("li"); li.textContent = val; list.appendChild(li); } }; // 监听数组
const arr = []; const newArr = new Proxy(arr, { get: function(target, key, receiver) { return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(target, key, value, receiver,'数组的劫持响应'); if (key !== "length") { render.addItem(value); } return Reflect.set(target, key, value, receiver); } }); // 初始化
window.onload = function() { render.init(arr); }; btn.addEventListener("click", function() { newArr.push(parseInt(newObj.text)); }); </script>
</body>
</html>
