响应式对象如何转成普通对象

前言

• 有时我们希望将响应式对象转为普通对象，类似于React中的不可变值的概念；

• 既想拿到数据操作，又要不破坏数据的响应式（因为响应式数据可能在别的地方也用到了）；

• 此时就需要 将 响应式对象如何转成普通对象。

在Element源码中的体现

看了element源码中的form-item.vue中有此需求的场景，拿到的校验规则rules对象是一个响应式对象，转成普通对象后才可放心对数据进行操作。源码中体现如下,我加了自己的注释

getFilteredRule(trigger) {
    const rules = this.getRules();
​
    return rules.filter(rule => {
        if (!rule.trigger || trigger === '') return true;
        if (Array.isArray(rule.trigger)) {
            return rule.trigger.indexOf(trigger) > -1;
        } else {
            return rule.trigger === trigger;
        }
    }).map(rule => objectAssign({}, rule));  // objectAssign方法将每个rule响应式对象转成普通对象
}

可以看到是通过 objectAssign方法实现的。

objectAssign方法

objectAssign方法定义在src/utils/merge.js中，作为一个工具方法来使用的，看下源码，我加了注释，方便理解

export default function(target) {
  // 从arguments类数组中的第2个元素开始遍历
  // 之所以用遍历，是考虑到该工具方法的通用性，也可以将多个对象合并。  
  for (let i = 1, j = arguments.length; i < j; i++) { 
    let source = arguments[i] || {}; // 拿到对象
    for (let prop in source) { // 遍历对象，拿到对象自己的 key value，重新组装到target对象中
      if (source.hasOwnProperty(prop)) {
        let value = source[prop];
        if (value !== undefined) {
          target[prop] = value;
        }
      }
    }
  }
​
  return target;
};
​

总结：

其实就是遍历响应式对象的key，value，赋给一个空的普通对象。