浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的。
1、defineProperty 数据展示
Object.defineProperty(obj,'name',{
configurable:true , // false则不可以删除key值
enumerable:true , // false则在枚举时候会忽略
value:'xixi'
writable:true // false则不可更改key的value值
}); //writable为false
var obj = {};
Object.defineProperty(obj,'name',{
value:'xixi'
writable:false,
configurable:true ,
enumerable:true ,
});
obj.val = '西瓜';//writable为false,不可以更改。 //configurable为false
var obj = {};
Object.defineProperty(obj,'name',{
value:'xixi'
writable:true,
configurable:false ,
enumerable:true ,
});
obj.val = '西瓜';
delete obj.val //configurable为false,不可以删除。 //enumerable为false
var obj = {};
Object.defineProperty(obj,'name',{
value:'xixi'
writable:true,
configurable:true ,
enumerable:false ,
});
for(var i in obj) {
console.log(obj[i]) // enumerable为false时,不会显示值
}
2、存取器描述
var obj = {};
Object.defineProperty(obj,'name',{
get:function(){} | undefined,
set:function(){} | undefined,
configuracble:true | false,
enumerable:true | false
})
//当前使用了setter和getter方法,不许使用writable和value两个属性
当设置获取对象的某个属性的时候,可以提供getter和setter方法
var obj = {};
var value = 'xixi';
object.defineProperty(obj, 'name', {
get: function() {
return value
},
set: function(val) {
value = val
}
})
console.log(obj.name) // xixi
obj.name = '西瓜';
console.log(obj.name) // 西瓜
浅析vue的双向数据绑定的更多相关文章
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- Vue原理--双向数据绑定
MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态 ...
- Vue之双向数据绑定
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- vue的双向数据绑定原理
原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...
- 深入vue源码,了解vue的双向数据绑定原理
大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...
随机推荐
- mysql乱码问题解决办法
最近开发一下小项目,遇到了最常见的乱码问题. 1.数据库使用utf-8 utf-8_generic_ci编码,使用csv上传并导入数据,插入数据的时候出现了问题,有很大部分数据没有被导入,所以使用m ...
- C# 给枚举类型增加一个备注特性
/// <summary> /// 备注特性 /// </summary> public class RemarkAttribute : Attribute { /// < ...
- Atitit 提升进度的大原则与方法 高层方法 attilax总结
Atitit 提升进度的大原则与方法 高层方法 attilax总结 生产力的提升点 1.1. 管理,管理的发展发展非常缓慢,1 1.2. 方法论(前后分离,dsl等)1 1.3. 工具( 工具链 ...
- CHKDSK/f
chkdisk c: /f
- js中$
$符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...
- Paypal Rest Api自定义物流地址(跳过填写物流地址)
PayPal之前的Rest Api是不支持自定义物流地址的,最新升级版本的提供了这个服务(Payment Experience),大概步骤如下: 1.申请一个自定义的配置ID 自定义配置包括Logo, ...
- c++ 出现“ error LNK2019: 无法解析的外部符号 该符号在函数 中被引用"错误原因
一般问题出在 (1)XXX.lib头文件,这个要包含(不然编译也不能通过) (2)需要XXX.lib或XXX.dll库.手动添加,项目->属性->配置属性->链接器->输入 然 ...
- ubuntu GCC 版本切换
(1) 查看gcc以及g++的版本 gcc -v g++ -v star@ai:~ $ gcc -v Using built-in specs. COLLECT_GCC=gcc COLLECT_L ...
- OpenResty 最佳实践 1
建议先搜索<OpenResty最佳实践.pdf> 到网上下载openresty-1.13.6.1-win32 考虑到操作方便性,建议建立个bin目录,放入系统目录中,生成 nginx-st ...
- java.sql.SQLException: ORA-01578: ORACLE 数据块损坏问题解决办法
错误信息: java.sql.SQLException: ORA-01578: ORACLE 数据块损坏 (文件号 17, 块号 315703) ORA-01110: 数据文件 17: 'D:\ORA ...