《Vue-数据响应式》

162 阅读2分钟

目的:深入理解构造选项中的data选项

首先,了解一下ES6的新语法:getter和setter

一. getter和setter

const obj1={
    姓:'刘',
    名:'昊然',
    姓名(){
    console.log(`我叫:${this.姓}${this.名}`)    
    }
}

正常情况下,在一个对象里定义了一个函数,如果想调用这个函数,应该:obj1.姓名()。得到打印:我叫:刘昊然。

1. getter

我现在调用函数的时候不想在后边加括号。可以在函数定义前边加个get:

可见,结果相同。这就是getter的用法。

在函数前边加个get,调用的时候,不加括号。 就像对象.属性名一样,因为加了get后,原来的函数就变成了对象的一个属性,只不过是以函数的样子定义了。

1. setter

既然可以用get获取属性,也有set设置属性:

setter的用法:在函数前边加一个set,必须传一个形参。直接使用:对象 . 属性=一个实参的形式,设置属性。

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

除了我们写的 姓,名,get,set之外,还有个(...)。代表对象里并没有叫做“姓名”的这个属性,它并不存在,只是有一个get~和set~的属性,所以我们依然可以用get和set去操作它。

二. 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属性实际上是不存在的