目的:深入理解构造选项中的data选项
首先,了解一下ES6的新语法:getter和setter
一. getter和setter
const obj1={
姓:'刘',
名:'昊然',
姓名(){
console.log(`我叫:${this.姓}${this.名}`)
}
}
正常情况下,在一个对象里定义了一个函数,如果想调用这个函数,应该:obj1.姓名()。得到打印:我叫:刘昊然。
1. getter
我现在调用函数的时候不想在后边加括号。可以在函数定义前边加个get:

在函数前边加个get,调用的时候,不加括号。 就像对象.属性名一样,因为加了get后,原来的函数就变成了对象的一个属性,只不过是以函数的样子定义了。
1. setter
既然可以用get获取属性,也有set设置属性:

那我们看看这个对象是什么:console.log(obj3)

二. Object.defineProperty
用于直接在一个对象身上添加或者修改属性,返回这个对象。
1. 语法
Object.defineProperty(obj,prop,descriptor)
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
它可以在一个对象已经声明好之后,再添加其他属性
2. 使用
const obj={}
let x=0
Object.defineProperty(obj,'xxx',{
get(){return x},
set(val){x=val}
})
给obj添加一个虚拟属性 xxx,它有一个get和set。读x的值时会调用get;写x的值时会调用set,通过val传参。
读:obj.xxx //0
写:obj.xxx=100 ,此时再读:x就是100
注意,你定义的xxx属性实际上是不存在的