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;
}
}
})
get,set方法的target参数即obj对象,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区别的更多相关文章

  1. vue和react之间的区别

    1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...

  2. vue双向绑定、Proxy、defineproperty

    本文原链接:https://www.jianshu.com/p/2df6dcddb0d7 前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素 ...

  3. Vue.mixin Vue.extend(Vue.component)的原理与区别

    1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...

  4. vue、React Nactive的区别(转载)

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  5. 实现双向绑定Proxy比defineproperty优劣如何?

    前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 ...

  6. vue $mount 和 el的区别

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于 ...

  7. vue中$mount与el区别

    vue中的$mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中 用法: 如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中 反之 没有指定el, ...

  8. 实现一个简易的vue的mvvm(defineProperty)

    这是一个最近一年很火的面试题,很多人看到这个题目从下手,其实查阅一些资料后,简单的模拟还是不太难的: vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的ge ...

  9. Vue路由钩子 afterEach beforeEach区别

    ​ vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path ...

随机推荐

  1. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

  2. MySqL rownum 序号 类似于 oracle的rownum

    mysql中没有 rownum 序号的功能,所以需要自己去实现序号的功能. @rownum 只是一个变量 可以换为 @i 等其他变量,但必须有@符号 SELECT @rownum:=@rownum+1 ...

  3. POJ3233]Matrix Power Series && [HDU1588]Gauss Fibonacci

    题目:Matrix Power Series 传送门:http://poj.org/problem?id=3233 分析: 方法一:引用Matrix67大佬的矩阵十题:这道题两次二分,相当经典.首先我 ...

  4. zkw 线段树

    优秀的 zkw 线段树讲解:<线段树的扩展之浅谈 zkw 线段树> 存一份模板代码(区间修改.区间查询): /* zkw Segment Tree * Au: GG */ #include ...

  5. DTED文件结构

    注:DTED层级为1时,每列总计2414字节,包含1201个高度信息:DTED层级为2时,每列总计7214字节,包含3601个高度信息:DTED层级为3时,每列包含9001个高度信息. 每列数据前八个 ...

  6. Chrome-逆向分析JS-2获取发送请求位置(以datatables获取表格数据为例)

    剧透:就是使用了一下 Chrome Source 的 XHR/fetch Breakpoints 功能,在发送请求时在该行进入断点调试. # 一:不认识一下 XHR/fetch Breakpoints ...

  7. TestStack.White安装详解

    一.安装 NuGet TestStack.White是通过NuGet进行安装的.NuGet最低支持VS2010.我使用的VS2015. 安装方式一 :从Visual Studio的工具->扩展和 ...

  8. Shell逻辑运算符及表达式

    一. 运算符总结说明 1. 条件运算符 运算符号 代表意义 应用 说明 = 等于 整型或字符串比较: str1 = str2 字符串str1 和字符串str2 相等时返回真,如果在[]中,只能是字符串 ...

  9. Thymeleaf 遇到的问题

    1. 后台传递long类型的值作为 js 执行方法的参数,精准度失效解决办法 解决办法:用thymeleaf的拼接字符串方法来解决 例:<button class="btn btn-p ...

  10. 用其他音乐源帮帮网易云,Windows听歌利器

    镜像文章 1.用其他音乐源帮帮网易云,Ubuntu听歌利器 2.用其他音乐源帮帮网易云,Android听歌利器 只剩下Windows端了,一并送上. 1.Windows懒人版 1.1第一种懒人方法 下 ...