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 ...
随机推荐
- c# 如何获取系统管理员权限(UAC) 及判断当前是否是管理员权限
环境说明: VS2012,windows 7 亲自验证过win7 和xp ,XP直接不弹框,因为XP没有UAC控制机制 步骤1: 右键项目-->属性-->安全性-->选中[启用Cl ...
- VS2010MFC编程入门
一.MFC编程入门教程之目录 第1部分:MFC编程入门教程之目录 1.MFC编程入门之前言 鸡啄米的C++编程入门系列给大家讲了C++的编程入门知识,大家对C++语言在语法和设计思想上应该有了一定的 ...
- router登录逻辑实现页面跳转
main.js文件中router.beforeEach((to, from, next) => { NProgress.start() const token = localStorage.ge ...
- [NOIP2015]子串 题解
题目描述 有两个仅包含小写英文字母的字符串A和B. 现在要从字符串A中取出k个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的字符串,请问有多少种方案可 ...
- 用Linux 搭建 PXE 网络引导环境
本例子中使用了CentOS7.4 minimal 系统,并且关闭了防火墙和selinux,并使用了dhcp.tftp.http和samba服务. 假设PXE服务器是192.168.4.104 ,tft ...
- python3反转列表的三种方式
1.内建函数 reversed() li = [1,2,3,4,5,6] a = list(reversed(li)) print(a) 注意:reversed()函数返回的是一个迭代器,而不是一个L ...
- Python笔记(一)_基础
数据类型和转换 整型.浮点型.字符串.布尔值 int() 整型转换 float() 浮点型转换 str() 字符串转换 运算符.操作符 算术运算符:+ - * / % // ** 赋值运算 ...
- Linux vsftpd服务配置以及三种验证方式以及常见错误解决办法
文件传输协议(FTP): 文件传输协议(FTP,File Transfer Protocol),即能够让用户在互联网中上传.下载文件的文件协议,而FTP服务器就是支持FTP传输协议的主机,要想完成文件 ...
- C语言|博客作业4
一.本周教学内容:用C语言编写程序-循环结构 2.4 输出华氏-摄氏温度转换表.要求学生掌握使用for循环语句实现指定次数的循环程序设计. 二.本周作业头 问题 答案 这个作业属于哪个内容 C语言程序 ...
- SQL分支语句与循环语句
分支语句 if then elsif then else end if 举例: set serveroutput on declare num number; begin num:; then dbm ...