七.MVVM问题

es6之扩展运算符 三个点（…）

对象的扩展运算符：常用于浅克隆

理解对象的扩展运算符其实很简单，只要记住一句话就可以：

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法实际上等价于:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

那么什么是深克隆，什么是浅克隆呢？

首先，克隆只针对对象、数组、函数等复杂数据。
浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化（根本上改变的是同一个对象）。

通过扩展运算符，或assign方法可以解决地址相同，随之变化的问题

深克隆就是创建一个新的空对象，开辟一块内存，然后将原对象中的数据全部复制过去，完全切断两个对象间的联系。

深克隆

var obj = JSON.parse(JSON.stringfy());或递归

---

JavaScript 的限制，Vue 不能检测以下变动的数组：

new一个实例，初始并没有在data中定义，后面动态添加的属性，vue检测不到。

1.当你利用索引直接设置一个项时，例如：`vm.items[indexOfItem] = newValue`

必须用全局方法 Vue.set(vm.items, indexOfItem, newValue) 或 实例方法 vm.$set(vm.items, indexOfItem, newValue) 来触发状态更新。

vm.items:  data属性中的对象或者数组；

indexOfItem：要改变的下标;

newValue：新的值

2.当你修改数组的长度时，例如：`vm.items.length = newLength`

可以使用 vm.items.splice(newLength) 。

proxy代理

Proxy用于修改某些操作的默认行为，等同与在语言层面做出修改，即对编程语言进行编程。

**Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

使用方法

var p = new Proxy(target, handler);

其中，target 为被代理对象。handler 是一个对象，其声明了代理 target 的一些操作。p 是代理后的对象。

当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。handler 能代理的一些常用的方法如下：

- get：读取
- set：修改
- has：判断对象是否有该属性
- construct：构造函数
- ...

看如下的 demo

var target = {   name: 'obj' }; var logHandler = {   get: function(target, key) {     console.log(`${key} 被读取`);     return target[key];   },   set: function(target, key, value) {     console.log(`${key} 被设置为 ${value}`);     target[key] = value;   } } var targetWithLog = new Proxy(target, logHandler); targetWithLog.name; // 控制台输出：name 被读取 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 othersconsole.log(target.name); // 控制台输出: others

• 在上面的 demo 中，
  
  - targetWithLog 读取属性的值时，实际上执行的是 logHandler.get ：在控制台输出信息，并且读取被代理对象 target 的属性。
  - 在 targetWithLog 设置属性值时，实际上执行的是 logHandler.set ：在控制台输出信息，并且设置被代理对象 target 的属性的值。