vue的property是什么,vue object.defineproperty 缺点
这篇文章主要介绍了某视频剪辑软件中定义属性和代理人的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
代理人的出现，给某视频剪辑软件响应式带来了极大的便利，比如可以直接劫持数组、对象的改变，可以直接添加对象属性，但是兼容性可能会有些问题
Proxy可以劫持的数组的改变，defineProperty 需要变异
defineProperty 中劫持数组变化的变异的方法
可以理解为在数组实例和原型之间，插入了一个新的原型的对象，这个原型方法实现了变异的方法，也就真正地拦截了数组原型上的方法
我们来看下vue2.x的源码
//vue 2.5.0
var arrayProto=Array.prototype
var数组方法=对象。create(数组原型)；//数组{}
函数定义（对象，键，值，可枚举){
Object.defineProperty(obj，key，{
值：val，
可枚举：可列举的，
可写：真，
可配置：真
});
}
var methodsToPatch=[
推，
砰，
轮班，
未换档，
拼接，
排序，
"反向"
];
/**
*拦截变异方法并发出事件
*/
methodstopatch。foreach(函数(方法){
//缓存原始方法
var original=array proto[method]；
//比如方法是推，则结果为
//push(){[本机代码] }
def(arrayMethods，method，function mutator() {
var args=[]，
len=参数。长度；
while(len-)args[len]=arguments[len]；
var result=original.apply(this，args)；
var ob=这个. ob _ _
定义变量已插入；
开关（方法){
案例"推送":
案例"未移位":
插入的=参数
破裂
外壳"拼接":
已插入=参数。切片(2)；
破裂
}
如果（已插入){
ob.observeArray(已插入);
}
//通知更改
卒于离开notify()；
回送结果
});
});
/**
*观察数组项目列表。
*/
观察者。原型。观察数组=函数观察数组(项目){
for (var i=0，l=items.lengthI li ) {
观察（项目【我】)；//后续的逻辑
}
};
Proxy可以直接劫持数组的改变
let proxy=新代理(水果，{
get: function (obj，prop) {
在目标文件中返回道具？未定义的
},
set: function (obj，prop，newVal) {
新价值
console.log(newVal ，newVal) //输出{名称："柠檬",编号：999 }
返回真实的
}
})
proxy.push({ name: lemon ，num: 999 })
console.log(水果)
Proxy代理可以劫持对象的改变，defineProperty需要遍历
定义属性
让水果={
苹果:2,
梨:22,
桃子:222
}
对象.键(水果)。forEach(函数（键){
Object.defineProperty(fruit[i]，key，{
可枚举：真，
可配置：真，
get: function () {
返回英国压力单位
},
set: function (newVal) {
val=newVal//输出纽瓦尔888
console.log(newVal ，newVal)
}
})
})
水果。苹果=888
代理人
让水果={
苹果:2,
梨:22,
桃子:222
}
let proxy=新代理(水果，{
get: function (obj，prop) {
在目标文件中返回道具？未定义的
},
set: function (obj，prop，newVal) {
新价值
console.log(newVal ，newVal) //输出纽瓦尔888
返回真实的
}
})
proxy.apple=888
Proxy代理可以劫持对象属性的添加，defineProperty用this.$set来实现定义属性，如果属性不存在，则需要借助这个10.95美元一套
div id=应用程序
span v-for=(value，name)in fruit“{ name } }:{ { value } }个/span
button @click=add()添加柠檬/按钮
/div
script src= https://UNP kg。com/vue /脚本
脚本
新Vue({
埃尔： #app ，
data() {
返回{
水果：{
苹果：1,
香蕉：4,
橙色：5
}
}
},
方法：{
add() {
这个。水果。柠檬=5；//不会让视图发生变化
//这个. set(this.fruit， lemon ，5) //this .$set可以
}
}
})
/脚本
对象.键(水果)。forEach(函数（键){
Object.defineProperty(水果，钥匙，{
可枚举：真，
可配置：真，
get: function () {
返回英国压力单位
},
set: function (newVal) {
val=newVal
console.log(newVal ，newVal) //根本没有进去这里
}
})
})
代理人直接可以添加属性
//vue 3
div id=应用程序
span v-for=(value，name)in fruit“{ name } }:{ { value } }个/span
button @click=add()添加柠檬/按钮
/div
script src= https://UNP kg。com/vue @ next /script
脚本
Vue.createApp({
data() {
返回{
水果：{
苹果：1,
香蕉：4,
橙色：5
}
}
},
方法：{
add() {
这个。水果。柠檬=5；//这样子是可以的
}
}
}).mount(#app) //vue 3不再是使用埃尔属性，而是使用增加
/脚本
let proxy=新代理(水果，{
get: function (obj，prop) {
在目标文件中返回道具？未定义的
},
set: function (obj，prop，newVal) {
新价值
console.log(newVal ，newVal) //lemon，888
返回真实的
}
})
代理。柠檬=888
Proxy
其他属性
应用场景 promisify化
用代理人写一个场景，请求都是通过回调，如果我们需要用承诺包一层的话，则可以
//server.js
//假设这里都是回调
导出常量搜索结果列表=function(data，callback，errorCallback) {
axios.post(网址，数据，回调，错误回调)
}
//promisify.js
从导入*作为服务器/server.js
const promisify=(name，obj)=(option)={
返回新承诺((解决，拒绝)={
返回对象[名称](
选项，
决心，
拒绝，
)
})
}
const serverPromisify=新代理（服务器，{
获取（目标，道具){
返回许诺(道具，服务器)
}
})
导出默认服务器承诺
使用
//index.js
从导入服务器承诺 serverPromisify
服务器承诺。搜索结果列表(数据)。然后(res={
})
如有不正确，望请指出
留下一个疑问，既然兼容性不是很好，那么尤大是怎么处理夹棉呢
到此这篇关于某视频剪辑软件中定义属性和代理人的区别详解的文章就介绍到这了，更多相关某视频剪辑软件定义属性和代理人内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。