vue的proxy和defineProperty区别
Object.defineProperty(obj,"name",{
set:function(val){
if(var==='lisi'){
console.log("誓死不叫这么土的名字")
}else{
objCopy.name = val
}
},
get:function(){
return objCopy.name.replace(/san/,'先生')
}
})
这个对每个data中的属性进行遍历绑定。
而,
var objCopy = new Proxy(obj,{
get:function(target,key){
if(key=='name'){
return target[key].replace(/san/,'先生');
}
},
set:function(target,key,value){
if(key == 'name'){
value=='lisi'?target[key]:target[key] = value;
}else{
target[key] = value;
}
}
})
此后,可通过objCopy.name的方式访问obj的name属性,也可以通过objCopy.name='lisi'的方式设置obj的name属性,而且不用给每个属性都设置set,get方法,不会触发循环调用,很是爽的。
这样我们通过对objCopy对象的操作就实现了对obj对象的操作,objCopy对象就是obj对象的代理对象。
vue3.0使用了Proxy替换了原先遍历对象使用Object.defineProperty方法给属性添加set,get访问器的笨拙做法。
也就是说不应遍历了,而是直接监控data对象了。
vue的proxy和defineProperty区别的更多相关文章
- vue和react之间的区别
1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...
- vue双向绑定、Proxy、defineproperty
本文原链接:https://www.jianshu.com/p/2df6dcddb0d7 前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素 ...
- Vue.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- 实现双向绑定Proxy比defineproperty优劣如何?
前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 ...
- vue $mount 和 el的区别
两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于 ...
- vue中$mount与el区别
vue中的$mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中 用法: 如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中 反之 没有指定el, ...
- 实现一个简易的vue的mvvm(defineProperty)
这是一个最近一年很火的面试题,很多人看到这个题目从下手,其实查阅一些资料后,简单的模拟还是不太难的: vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的ge ...
- Vue路由钩子 afterEach beforeEach区别
vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path ...
随机推荐
- 数字滚动动画效果 vue组件化
参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...
- AGC024B Backfront
题目大意 给你一个1~n的排列 你有两个操作:将一个数移到最后或将一个数移到最前 问将排列排序最少要几次操作 分析 年纪大了,脑子不行了.. 实际我们只需求出对与一段连续的数它在排列中已经有序的最长长 ...
- JVM调优(三)——基于Btrace的监控调试
JVM调优(三)--基于Btrace的监控调试 简介 Btrace可以动态地向目标应用程序的字节码注入追踪代码 用到的技术: JavaComplierApi.JVMTI.Agent.Instrumen ...
- oracle 远程访问
oracle 本机能连外部访问不了 新装的 oracle 数据库经常会出现本地计算机能连接,但是局域网内的其他计算机不能连接的问题,如果出现此问题可以参考此文来解决. 本文中用的数据库版本为 Orac ...
- 聊聊 API 签名方式
前言 现在越来越多的公司以 API 的形式对外提供服务,这些 API 接口大多暴露在公网上,所以安全性就变的很重要了.最直接的风险如下: 非法使用 API 服务.(收费接口非法调用) 恶意攻击和破坏. ...
- Python 中类和实例的通俗讲解
本文为转载整理,我转过来作为备份留作自己查看,请点击链接阅读原文.原文链接为:点此 Python类与实例的讲解,相当通俗易懂.非常推荐! class Person: 注意,类的名称一般用大写字母开头, ...
- 【图像编辑】三款图像编辑软件Photoshop、AffinityPhoto、Gimp非专业简单横向对比
人的感知分为:视觉.听觉.嗅觉.味觉.触觉.视觉即是对光的强弱.颜色.鲜艳程度的感知.视觉在纸质上通过图像来表达,在计算机数字领域则通过图像(位图)和图形(矢量图)来表达,本文提及的三款软件均为图像( ...
- undefined,null,!,!=之间的关系
1.!和!=的关系 2.null 和0的关系
- python基础----求水仙花数
水仙花数,即一个三位数,各个位上的数字的三次方相加,等于该数本身.如:153 = 1**3 + 5 ** 3 + 3 ** 3 def is_narc_num(n): # if n <100 o ...
- 华为要卖5G技术,虽然我和华为没有一点关系,但是我也很呵呵
http://www.sohu.com/a/340555529_166680 老任头,竟然说出了这样的话,要卖5G技术给西方,然后塑造对手. 按照老任头的脾气,老任头应该不至于胡说八道这样的话,但是呢 ...