顺德品牌网站建设公司,分析seo做的不好的网站,WordPress微信签到,花垣县建设局网站假期第一篇#xff0c;对于基础的知识点#xff0c;我感觉自己还是很薄弱的。 趁着假期#xff0c;再去复习一遍
Object.defineProperty(),对于这个方法#xff0c;更多的还是停留在面试的时候#xff0c;面试官问你vue2和vue3区别的时候#xff0c;不免要提一提这个方法…假期第一篇对于基础的知识点我感觉自己还是很薄弱的。 趁着假期再去复习一遍
Object.defineProperty(),对于这个方法更多的还是停留在面试的时候面试官问你vue2和vue3区别的时候不免要提一提这个方法vue2的底层是Object.defineProperty()vue3是proxy对象
顺便把两者的区别再罗列一下 1、性能优化Vue 3引入了响应式系统的重写使其更加高效。Vue 3使用了Proxy对象相较于Vue 2中的Object.definePropertyProxy能够更好地捕获并跟踪对响应式数据的修改提供了更好的性能。 2、更小的体积Vue 3使用了模块化开发的方法可以按需导入功能模块从而减小了框架的整体体积大小。 3、Composition APIVue 3引入了Composition API这是一种新的代码组织方式它允许开发者通过逻辑组合API创建可重用的逻辑块。相比Vue 2中的Options APIComposition API更加灵活和可组合使得代码更易于维护和重用。 4、更好的TypeScript支持Vue 3对TypeScript的支持更加友好通过ts-check指令和相关的类型声明可以提供更好的类型检查和代码智能提示。 5、Teleport组件Vue 3中引入了Teleport组件可以方便地将组件渲染到DOM中的其他位置这在处理模态框、弹出层等情况下非常有用。 6、更好的递归组件Vue 3对递归组件的支持进行了改进可以更好地处理递归组件的更新和渲染。 现在关于Object.defineProperty()方法再深入一些
Object.defineProperty 是 JavaScript 的一个内置方法用于在一个对象上定义一个新的属性或修改现有属性的特性。
语法如下
Object.defineProperty(obj, prop, descriptor)参数注解
obj要在其上定义属性的对象。
prop要定义或修改的属性的名称。
descriptor要定义或修改的属性的描述符对象包含属性的各种特性。descriptor 对象也可称为配置项包含以下可选属性
value属性的值默认为 undefined。
writable属性的值是否可以被修改。默认为 false即该属性是只读的。
enumerable属性是否可枚举是否出现在对象的枚举属性中。默认为 false。
configurable属性是否可以被删除或修改特性。默认为 false。
get读取时内部调用的函数
set写入时内部调用的函数
通过 Object.defineProperty 方法在 obj 对象上定义了一个名为 “name” 的属性该属性的初始值为 “John”并且可写、可枚举和可配置。后续通过对该属性的赋值操作可以修改属性的值 示例
const obj {};// 定义一个名为 name 的可写属性
Object.defineProperty(obj, name, {value: John,writable: true,enumerable: true,configurable: true
});console.log(obj.name); // 输出 Johnobj.name Tom;
console.log(obj.name); // 输出 Tom直接使用set修改get获取
const obj {_name: John,get name() {return this._name;},set name(value) {this._name value;}
};console.log(obj.name); // 输出 Johnobj.name Tom;
console.log(obj.name); // 输出 Tom感觉还是有些不明白吗那就在大白话一点
假如已经有一个对象
let person {
name:莲花,
gender:男,
}现在要添加一个属性age值38
可以直接在对象里添加
let person {
name:莲花,
gender:男,
age:38
}假如在实际的工作场景中要添加的属性是未知的根据某些条件动态添加那直接添加肯定不合适 且直接添加和使用Object.defineProperty()去添加还是有区别的直接添加的可以随意改随意删随意被枚举而Object.defineProperty()添加的可以控制是否允许改是否允许删是否允许被枚举。
示例
let person {
name:莲花,
gender:男,
}
Object.defineProperty(person,age,{
value38})
//参数1要添加参数的对象给person对象添加所以是person
//参数2要添加的属性名age
//参数3配置项打印看下直接添加和Object.defineProperty()添加的区别 直接添加所有属性名的颜色都是一样的而Object.defineProperty()创建的age的属性名颜色比其他两个属性名颜色淡一些这是因为Object.defineProperty()配置项的enumerable属性默认是false即默认是不可以被枚举的不参与遍历。 如果我们console.log(Object.keys(person)),打印由person对象所有属性名组成的数组会发现直接添加的属性名都可以打印出来而Object.defineProperty()创建的则没有age 想要被枚举的话enumerable设置为true即可
let person {
name:莲花,
gender:男,
}
Object.defineProperty(person,age,{
value38
enumerable:true,//控制属性是否可以被枚举默认为false
})如果我们想修改age的值直接添加的通过person.value即可修改但是Object.defineProperty()创建的是不能直接修改的这就要说到writable属性默认是false即默认不允许修改,设置为true即可
let person {
name:莲花,
gender:男,
}
Object.defineProperty(person,age,{
value38
enumerable:true,//控制属性是否可以被枚举默认为false
writable:true,//控制属性是否可以被修改默认为false
})如果我们不想要age这个属性想删掉直接添加的通过delete person.age即可删除但是Object.defineProperty()创建的是不能直接修改的这就要说到configurable属性默认是false即默认不允许删除,设置为true即可
let person {
name:莲花,
gender:男,
}
Object.defineProperty(person,age,{
value38
enumerable:true,//控制属性是否可以被枚举默认为false
writable:true,//控制属性是否可以被修改默认为false
configurabletrue,//控制属性是否可以被删除默认为false
})如果现在有个number字段需求是age的值要读取number的值即动态赋值
直接添加
let number 18
let person {
name:莲花,
gender:男,
age:number
}这样写确实是把number的值赋给age了但是如果后期number的值变了假设变为20age的值是不会跟着变的还是原来的18
因为语句从上向下执行的时候第一次定义的时候已经走完了以后再改number的值都只是number自己的事第一次定义完了就结束了person对象的值不会再改变。 如果手动修改重新给age赋值确实会改变age的值,但是如果想number一改变age的值就变那就要用到Object.defineProperty()方法了 //直接手动修改重新给age赋值示例 let number 18
let person {
name:莲花,
gender:男,
age:number
}
number 20
person.age number//Object.defineProperty()示例 Object.defineProperty(person,age,{
//当读取person的age属性时get(getter)函数就会被调用且返回值是age的值
//get:function(){}
//return number
//})
//简写
get(){
return number
}
//当修改person的age属性时set(setter)函数就会被调用且会收到修改的具体值
//打印value当值改变的时候确实value接收到了但是age并没有改变这是因为person的age属性接收的是number的值
//set确实调用了但是number变量的值没有改变所以set中给number赋值
set(value){
number value
}这时候如果number的值改变了会触发getage直接拿number的值
如果直接修改person.age,会触发set先修改number的值再触发getage去拿number的值
Object.defineProperty了解了之后现在开始了解数据代理
数据代理 通过一个对象代理另一个对象中属性的操作监听属性的变化、拦截属性的读写等
示例
let obj {
a:1
}let obj2 {
b:2
}
//obj2想访问obj.a且可以修改obj.a的值
//给obj2新增属性a
//get中返回obj.a,即obj2新增的属性a拿的是obj.a的值
//set中修改当obj2.a值发生改变的时候再赋值给obj.a,再触发getobj2.a再去拿obj.a的值
Object.defineProperty(obj2,a,{
get(){
return obj.a
}
set(value){
obj.a value
}第一篇结束~~~
