控制台打印的vue组件实例，怎么看？

Question

我是在vue组件里通过console.log(this)打印出来的上图。谁能帮我解读一下打印出来的东西怎么看？为什么打印的出对线，是有名字的？？正常来讲打印出来的东西不是不会标名字吗？例如下图：同上，也是有名字这些浅色的属性是什么属性？我本来以为是原型链上的属性，但是proto上的同样是浅色，所以浅色表示什么类型的属性？1 2 知道了，是构造器的名字，但是3是什么意思还是不知道

Answer 1

你打印出来的是某个非原生类的实例就有名字：

function A(){}

var a = new A();

console.log(a); // => A {}

var b = {};

console.log(b) // => {}, 比如Object类的实例不会显示Object

//第三点是设置对象属性的可枚举/可读可写：

var c = {c1: 'xxx'};

Object.defineProperty(c, "c2", {

  enumerable: false,

  configurable: false,

  writable: false,

  value: "c2"

});

console.log(c); //c1就是显示的，c2是隐式的

c.c1 = "666";

c.c2 = '666';

console.log(c); // =>{c1: "666", c2: "c2"},c1能写，c2的值不能 

for(var cItem in c){

  console.log(cItem + ': ' + c[cItem]);

} // => 'c1: 666'，c1能被枚举，c2不能。

Answer 2

解决方案：复写console.log()