侵入式:改变数据时,要调用官方的API,数据更新,视图更新是因为直接在官方的API里做了相关的更新数据和视图的操作,但对于非侵入式,数据更新,视图更新这就是vue的神奇之处
Object.defineProperty() (js引擎赋予的功能)方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象(Object),js提供Object.defineProperty() 方法,是因为它可以设置一些额外隐藏的属性(writable:是否可重新赋值,enumerable:是否可以被枚举,默认一般都是flase)
语法
Object.defineProperty(obj, prop, descriptor)
参数
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol 。
descriptor:要定义或修改的属性描述符。
示例
1.基本用法
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age', {
writable:true, //能够重新赋值
value: 18, //writable、vakue和get、set不能一起用,因为get、set本身就是为了得到值
})
console.log(person); //{name: '张三', sex: '男', age: 18}
2.Object.defineProperty()中高级的属性描述符
let number = 18;
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age', {
//当有人读取person的age属性时,get函数(getter)就会被调用,且新增了age属性(因为本身没有age属性,要先新增才行)
get: function () {
console.log(11); //11
return number //返回值就是属性值
},
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set: function (value){
console.log(value); //21
number=value //只是重新赋值get返回的值,为了下一次读取person.age做准备
}
})
person.age //只执行console.log(11)
person.age=21 //只执行 console.log(value)