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

Question

我是在vue组件里通过console.log(this)打印出来的上图。
谁能帮我解读一下打印出来的东西怎么看？

1. 为什么打印的出对线，是有名字的？？正常来讲打印出来的东西不是不会标名字吗？例如下图：

1. 同上，也是有名字
2. 这些浅色的属性是什么属性？我本来以为是原型链上的属性，但是proto上的同样是浅色，所以浅色表示什么类型的属性？

1 2 知道了，是构造器的名字，但是3是什么意思还是不知道

Answer 1

3 是 getter 属性
类似

const a = {get k(){return '123'}}
console.log(a)

Answer 2

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

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 3

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