当前位置:网站首页>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 ]
边栏推荐
- Common redis data types and application scenarios
- Cartoon: what are the attributes of a good programmer?
- How can the boss choose programmers to help me with development?
- ionic cordova项目修改插件
- Where is the operation of convertible bond renewal? Is it safer and more reliable to open an account
- Photoshop plug-in action related concepts actionlist actiondescriptor actionlist action execution load call delete PS plug-in development
- Creation and use of thymeleaf template
- Machine learning notes - gray wolf optimization
- Crud of MySQL
- 【jvm】运算指令
猜你喜欢
Crud de MySQL
Select sort and bubble sort
Ionic Cordova project modification plug-in
Ctfshow web entry command execution
Common PHP interview questions (1) (written PHP interview questions)
超越PaLM!北大硕士提出DiVeRSe,全面刷新NLP推理排行榜
729. My schedule I: "simulation" & "line segment tree (dynamic open point) &" block + bit operation (bucket Division) "
sql server学习笔记
12 MySQL interview questions that you must chew through to enter Alibaba
lvgl 显示图片示例
随机推荐
The difference between abstract classes and interfaces in PHP (PHP interview theory question)
Install PHP extension spoole
STM32+BH1750光敏传感器获取光照强度
How can the boss choose programmers to help me with development?
Bugku cyberpunk
Bugku's steganography
Au - delà du PARM! La maîtrise de l'Université de Pékin propose diverse pour actualiser complètement le classement du raisonnement du NLP
Change multiple file names with one click
把 ”中台“ 的思想迁移到代码中去
漫画:程序员不是修电脑的!
我这边同时采集多个oracle表,采集一会以后,会报oracle的oga内存超出,大家有没有遇到的?
JS bright blind your eyes date selector
Bugku's Ping
P1451 求细胞数量/1329:【例8.2】细胞
百亿按摩仪蓝海,难出巨头
Brief introduction of machine learning framework
计算中间件 Apache Linkis参数解读
Machine learning notes - gray wolf optimization
12 MySQL interview questions that you must chew through to enter Alibaba
Bugku's Ah Da