当前位置:网站首页>Object. defineProperty() - VS - new Proxy()
Object. defineProperty() - VS - new Proxy()
2022-07-05 15:21:00 【Shepherd Wolf】
Catalog
Object.defineProperty The defects of
1. Cannot detect new or delete object properties
2. Unable to listen for array changes
Vue2.0 :
adopt Object.defineProperty Method property interception method , hold data The reading and writing of each data in the object is transformed into getter/setter, Notify view to update when data changes .
Object.defineProperty()
grammar :
Object.defineProperty(obj, property, descriptor)
Next, we will focus on the third parameter :descriptor:
stay JS Objects in have two properties , They are data attributes and accessor attributes ,
So its descriptors are also classified according to attributes , It is divided into Data descriptor and Accessor descriptor .
When using descriptors , It must be one of two forms , And You can't use both at the same time .
When using the getter or setter Method , Not allowed writable and value These two properties ( If you use , Will directly report an error )
Data descriptor
Have the following optional key values :
configurable: Indicates whether the attribute can pass delete Delete , Whether to modify the properties of attributes or whether to modify accessor attributes , The default is false.
enumerable: Indicates whether the attribute can be enumerated , That is, whether it can be passed for..in Access properties . The default is false.value: Represents the value of the property . It can be anything that works JS value . The default is undefined.
writable: Indicates whether the value of the property is writable , The default is false.
Accessor descriptor
Have the following optional key values :
configurable: Indicates whether the attribute can pass delete Delete , Whether to modify the properties of attributes or whether to modify accessor attributes , The default is false.
enumerable: Indicates whether the attribute can be enumerated , That is, whether it can be passed for..in Access properties . The default is false.get: Function called when reading properties , The default value is undefined.
set: The function called when the property is written , The default value is undefined.
const user = {
age: 18,
wife: {
name: 'xiao',
age: 17
}
}
var newName = 'wang'
Object.defineProperty(user, 'name', {
get () {
console.log('get Method is called ')
return newName
},
set (val) {
console.log('set Method is called ')
newName = val
}
})
console.log(user.name)
user.name = 'lao wang'
console.log(user.name)
The results are as follows :
new Proxy()
new Proxy() Turn the target object into a proxy object
Parameters 1: user -----> target Target audience
Parameters 2: handler --> Processor object , Used to monitor data , And data operation
const user = {
name: 'wang',
age: 18,
wife: {
name: 'xiao',
age: 17
}
}
const proxyUser = new Proxy(user, {
get (target, property) { // Read a property value of the target object
console.log('get Method is called ')
return Reflect.get(target, property)
},
set (target, property, val) { // modify / Add property value
console.log('set Method is called ')
return Reflect.set(target, property, val)
},
deleteProperty(target, property) { // Delete a property of the target object
console.log('delete Method is called ')
return Reflect.deleteProperty(target, property)
}
})
// By proxy object :
// check --- Get a property value in the target object
console.log(proxyUser.name)
// Change --- Update a property value in the target object
proxyUser.name = 'lao wang'
console.log(user)
// increase --- Add a new attribute value to the target object
proxyUser.sex = 'male'
console.log(user)
// Delete --- Delete a property value of the target object
delete proxyUser.name
console.log(user)
The results are as follows :
Object.defineProperty The defects of
const data = {
name: '',
};
// Traversing objects , Hijack its property value
Object.keys(data).forEach(function(key) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
},
set: function(newVal) {
// We can do something extra when the property value changes
console.log(` Hello everyone , My department ${newVal}`);
},
});
});
data.name = ' Residue residue ';
although Object.defineProperty By setting... For properties getter/setter Be able to complete the data response , But it's not the perfect way to make data responsive , The main defects are :
1. Cannot detect new or delete object properties ( Add attributes directly 、 Delete attribute , The page will not be updated );
2. Unable to listen for array changes ( Modify the array directly by subscript , The interface doesn't update automatically .)
Cannot detect new or delete object properties
<p>{
{obj}}</p>
<p>{
{arr}}</p>
data(){
return {
obj:{
a:2
}
}
},
mounted () {
this.obj.b = 222
},
<!-- obj Show results -->
//obj:{ "a": 2 }
resolvent :
(1) Attribute added :
this.obj = Object.assign({},this.obj, { b: 1, e: 2 })
this.obj = {...this.obj,...{ b: 3, e: 2 }}
this.$set(this.obj,'f',0) // or vue.set(this.obj,'f',0)
(2) Delete attribute :
this.$delete(obj, propertyName/index) // or vue.delete(obj, propertyName/index)
Unable to listen for array changes
<p>{
{arr}}</p>
data(){
return {
arr:[1,2]
}
},
mounted () {
this.arr[0]= 3333
},
<!-- arr Show results -->
arr:[ 1, 2 ]
边栏推荐
- Bugku's steganography
- Crud of MySQL
- Photoshop插件-动作相关概念-非加载执行动作文件中动作-PS插件开发
- Misc Basic test method and knowledge points of CTF
- 做研究无人咨询、与学生不交心,UNC助理教授两年教职挣扎史
- 【jvm】运算指令
- Can I pass the PMP Exam in 20 days?
- Visual task scheduling & drag and drop | scalph data integration based on Apache seatunnel
- Bugku's Ah Da
- STM32+BH1750光敏传感器获取光照强度
猜你喜欢
Talking about how dataset and dataloader call when loading data__ getitem__ () function
做研究无人咨询、与学生不交心,UNC助理教授两年教职挣扎史
把 ”中台“ 的思想迁移到代码中去
MySQL----函数
Your childhood happiness was contracted by it
P1451 calculate the number of cells / 1329: [example 8.2] cells
Ctfshow web entry information collection
B站做短视频,学抖音死,学YouTube生?
Machine learning notes - gray wolf optimization
Bugku telnet
随机推荐
Crud of MySQL
超越PaLM!北大碩士提出DiVeRSe,全面刷新NLP推理排行榜
我想咨询一下,mysql一个事务对于多张表的更新,怎么保证数据一致性的?
Reasons and solutions for redis cache penetration and cache avalanche
计算中间件 Apache Linkis参数解读
JMeter performance test: serveragent resource monitoring
How to paste the contents copied by the computer into mobaxterm? How to copy and paste
Common interview questions about swoole
【jvm】运算指令
NBA赛事直播超清画质背后:阿里云视频云「窄带高清2.0」技术深度解读
Bugku's Eval
华为哈勃化身硬科技IPO收割机
Common redis data types and application scenarios
Interpretation of Apache linkage parameters in computing middleware
复现Thinkphp 2.x 任意代码执行漏洞
Brief introduction of machine learning framework
Garbage collection mechanism of PHP (theoretical questions of PHP interview)
OSI 七层模型
Crud de MySQL
Photoshop plug-in action related concepts actionlist actiondescriptor actionlist action execution load call delete PS plug-in development