vue2 如何去除带__ob__这样的数据？

Question

data: function () {    return {        cityData: cityData,        selectedOptions:this.source[this.schema_key]    }}console上面的this.source[this.schema_key]如下[24, 81, __ob__: Observer]有么有一种方式可以直接这样获取这样数据[24, 81]

Answer 1

__ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。

console.log这样的打印函数，被打印的变量会执行自身的toString()，这样，即便内部属性是不可枚举，实际上也能看到。举个例子：

const obj = {

    a: 0,

    b: 1

};

Object.defineProperty(obj, 'b', {

    writable: false,

    enumerable: false,

    configurable: false

});

console.log(obj);    // Object {a: 0, b: 1}

因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监控，那么你使用vue的意义何在……

如果仅仅是去掉这些监控器而不考虑后果的话，把对象复制一份就行了，因为复制的对象是不包含不可枚举属性的。

const obj1 = {

    a: 0,

    b: 1

};

Object.defineProperty(obj1, 'b', {

    writable: false,

    enumerable: false,

    configurable: false

});

const obj2 = Object.assign({}, obj1);

console.log(obj2);    // Object {a: 0}

js这类动态语言，复制对象是个很头疼的事情。我写了个简单的，你可以参考一下：

//对象深复制，不考虑循环引用的情况

function cloneObj(from) {

    return Object.keys(from)

        .reduce((obj, key) => (obj[key] = clone(from[key]), obj), {});

}

//数组深复制，不考虑循环引用的情况

function cloneArr(from) {

    return from.map((n) => clone(n));

}

// 复制输入值

function clone(from) {

    if (from instanceof Array) {

        return cloneArr(from);

    } else if (from instanceof Object) {

        return cloneObj(from);

    } else {

        return (from);

    }

}

const obj = [

    {

        name: '1'

    },

    {

        name: '2'

    }

];

const obj2 = clone(obj);

console.log(obj2);

在外面直接用clone()方法就行了。