Table of contents
2.Object.defineproperty method
1.Basic configuration items of Object.defineproperty method
2. The advanced configuration items of the Object.defineproperty method are particularly important
1. Operation (read/write) of attributes in another object through an object proxy
1. Understanding of MVVM
Although it does not fully follow the MVVM model , Vue's design is also inspired by it. Therefore, the variable name (abbreviation of ViewModel) is often used in documents to represent Vue instances .
vmThe above sentence is from the Vue2 document, so if we want to learn Vue, it is necessary to understand MVVM
Vue instance results:
Analysis summary 1:
MVVM model:
1.M: Model: data in data
2.V: View: template code
3.VM: ViewModel: Vue instance
Observations found:
1. All attributes in data finally appear on the Vue instantiated object.
2. All properties on the Vue instantiated object and all properties on the Vue prototype can be used directly in the Vue template .
2.Object.defineProperty method
Object.defineProperty is a method to add properties to an object.
Object.defineProperty (object to add properties to, properties to add, {configuration item object})
<script>
let person = {
name:'张三',
sex:'男',
age:18
}
// Object.defineProperty(person,'age',{
// value:18,
// });
console.log(Object.keys(person)); //添加的属性可以被遍历到
console.log(person);
</script> 
Add the age attribute directly to the person object, and the added attribute can be traversed.
<script>
let person = {
name:'张三',
sex:'男',
// age:18
}
Object.defineProperty(person,'age',{
value:18,
});
console.log(Object.keys(person));
console.log(person);
</script>
1.Basic configuration items of the Object.defineProperty method
Problem 1: The properties of objects added through Object.defineproperty are not traversable (not enumerable).
When the properties added to the object through Object.defineproperty are printed and displayed, the color of the added properties is a little lighter. This means that the properties are not enumerable (cannot be traversed).
Solution: Set the enumerable value of the configuration item to true
Object.defineProperty(person,'age',{
value:18, //配置项1：value:添加属性的值
enumerable:true,//控制属性是否可以枚举，默认值是false
});
Problem 2: After solving the problem that the added attributes are not traversable, after changing the attribute value of the added attribute, but the object is printed, the added attribute value remains unchanged.
Solution: Set the writable value of the configuration item to true
Object.defineProperty(person,'age',{
value:18, //配置项1：value:添加的属性的值
enumerable:true,//配置项2：控制属性是否可以枚举，默认值是false
writable:true, //配置项3：控制属性是否可以被修改，默认值是false
});
Question 3: Properties added to an object through Object.defineProperty cannot be deleted, but object properties written directly can be deleted.
Directly written object properties:
Object properties added via Object.defineProperty :
Solution: Set the writable value of the configuration item to true
Object.defineProperty(person,'age',{
value:18, //配置项1：value:添加的属性的值
enumerable:true, //配置项2：控制属性是否可以枚举，默认值是false
writable:true, //配置项3：控制属性是否可以被修改，默认值是false
configurable:true //控制属性是否可以被删除，默认值是false
});
2. The advanced configuration items of the Object.defineProperty method are particularly important
<script>
let number = 520;
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取了age属性了');
return number; //返回的是age属性的值
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(newValue){
console.log('有人修改了age属性,且值是:',newValue);
}
});
console.log(Object.keys(person));
console.log(person);
</script>
Question: Why is the age attribute still 520 after modifying person.age = 100 and printing the person object?
Answer: Because the value of the age attribute comes from number, number has not changed. Set only receives the modified specific value, but does not modify number , so the value of number must be modified.
<script>
let number = 520;
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取了age属性了');
return number; //返回的是age属性的值
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(newValue){
//newValue收到的是要修改的值
console.log('有人修改了age属性,且值是:',newValue);
number = newValue; //要修改number的代码，因为age的值是number的值，set只是收到修改的具体值，但是没有去修改
}
});
console.log(Object.keys(person));
console.log(person);
</script>
Analysis summary 2:
The number and person objects are two different things, and they are related using the Object.defineProperty method . Person is indeed an object, and it does have an age attribute, but the value of the age attribute is currently available .
3. Data Broker
1. Operation (read/write) of attributes in another object through an object proxy
<script>
let obj = {x:100};
let obj2 = {y:200};
//通过obj2对象能读到x,也能修改x
Object.defineProperty(obj2,'x',{
//读
get(){
return obj.x;
},
//写
set(newValue){
obj.x = newValue;
}
})
</script>Console verification:
Analysis: The operation x can be obtained through obj, and x can also be operated through obj2
2. Data proxy in Vue
Analysis summary 2:
vm is an instantiated object of Vue.
1. Data proxy in Vue:
Use the vm object to proxy the operations (read/write) of attributes in the data object
2.Benefits of data proxy in Vue:
More convenient operation of data in data
3. Basic principles (important)
Add all properties in the data object to the Vue instantiated object vm through Object.defineProperty() . For each property added to the vm, specify a getter/setter.
Operate (read/write) the corresponding properties in the data inside the getter/ setter . The data attribute value is hijacked and placed in _data.
Verification: The data attribute value is hijacked and placed in _data
<div id="app">
<h2>学校名称:{
{name}}</h2>
<h2>学校地址:{
{address}}</h2>
</div>
<script>
let data = {
name:'三院',
address:'亚洲大陆中国'
}
const vm = new Vue({
el:'#app',
data:data
})
console.log(vm);
</script>
<div id="app">
<h2>学校名称:{
{name}}</h2>
<h2>学校地址:{
{address}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
name:'三院',
address:'亚洲大陆中国'
}
})
console.log(vm);
</script>
