Hello, I am Xiao Suoqi. The carefully crafted Vue tutorials are constantly updated. If you want to learn & consolidate & avoid pitfalls, just learn together~
Object definition configuration method
code
To introduce the data agent, write the code first and then add explanations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>回顾Object.defineproperty方法</title>
</head>
<body>
<script type="text/JS" >
let number = 18
let person = {
name:'张三',
sex:'男',
}
// 它的功能是给person配置一个age属性
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false,f12可以看到颜色为浅色，用Object.keys(person)获取不到age的key（不可枚举）
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
//get:function(){}=
get(){
// 如果不这样关联，number值不变，从上往下执行完结束，是修改不了的必须关联
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
// console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
image-20230812002421058
writable:false The default value is false and cannot be modified.
image-20230812003530814
writable：true
image-20230812003444218
Writing directly into the object can be modified and deleted at will, but adding configuration items is no longer optional. If you want to modify or delete it, you need to configure it.
When a getter is added, the defined attribute will change with the modification, and the attribute is controlled by calling the attribute get -invoke property getter
image-20230812004517285
data broker
Modify properties in another object through an object proxy
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/JS" >
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
-
In
getthe method, when you readobj2.xthe value of ,obj.xthe value of will actually be returned becausegetthe method internally usesobj.x -
In
setthe method, when you setobj2.xthe value of , you will actually assign this value toobj.x, thereby modifyingobjthe properties in the objectx
All data in data will go through the data agent.
When you datadefine data properties in the options of a Vue instance, Vue will automatically proxy these data properties to the Vue instance.
Specifically, when you datadefine a property in Vue, Vue will add the property to the Vue instance and create an internal reactive data object that will track changes to the property. When using this attribute, Vue will establish a binding to this responsive data object so that the template can automatically update when the data changes.
This process implements the concept of data proxy, that is, datathe properties defined in are proxied on the Vue instance, allowing you to access these properties directly in the Vue instance. In fact, these properties are stored in the internal reactive data object.
Clicking on name and age below will display the values. They are all data agents and can change the content.
image-20230813001425128
Sochi Q&A
Q: What happens if you put the method in data? Do you use a proxy?
A: Use the proxy. Although the defined method should not use the proxy, it is different from the data. The data changes, but the method remains unchanged. This will definitely increase the cumbersomeness of the code.
This makes no sense, and the setter & getter have no place to use
So let’s just write it as normal and write it in methods.
If it is useful to you, please give me a free thumbs up~