Vue的Observer对象使用Object.assign转化为普通对象或数组

文章目录

1. 1. 为什么要转换Observer对象
2. 2. Object.assign是什么
3. 3. 举个例子 🌰
4. 4. 实战解决数据操作

每次做vue开发的时候都会遇到这个问题，这次记录下来。

为什么要转换Observer对象

Vue2.6新增了observable函数，用于生成一个响应式对象。这个响应式对象即Observer对象。Observer对象主要用于触发DOM的更新。

也就是说，观察者模式的主要应用场景，是当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，自动重新更新获取这个变量的新值。

emmm，确实非常符合vue的特征。

但是这也带来一些弊端，很多时候我们习惯于拿到一个数据可以直接操作，或者至少像一些更严格点的语言，定义getter和setter。而Observer这种不能直接操作对象总是有点让人懵。

网上提供了一些解决思路。或许他们在某些情况下有用吧，但是我这里实测无效。

let parsedobj = JSON.parse(JSON.stringify(obj))
console.log(parsedobj)

不得不说，js里也经常有些骚操作。但是我还是推荐更规范的做法，比如用 Object.assign。

Object.assign是什么

先看看ES6官方文档是怎么介绍的：

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。

使用起来也很简单：

Object.assign(target, ...sources)

// 参数:  
//     target--->目标对象
//     source--->源对象
// 返回值：
//     target，即目标对象

举个例子 🌰

基础用法：

let target = {name:'lilei', age:40};
let source = {state:'single'}
let result = Object.assign(target, source);
console.log(target, target==result);

// output: {name:'lilei', age:40, state:'single'} true

多个源对象与重名的情况：

let target = {name:'lilei', age:40};
let source1 = {state:'single', age:39}
let source2 = {mood:'happy'}
let result = Object.assign(target, source1, source2);
console.log(target);

// output: {name:'lilei', age:39, state:'single', mood:'happy'}

实战解决数据操作

针对oberser对象的情况，我们通常需要直接转换为普通对象或者数组。

// 转换为对象
function convert2Object(source){
  return Object.assign({}, source);
}

// 转换为数组
function convert2Array(source){
  return Object.assign([], source);
}

So easy，收工。