浅析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> < ...
随机推荐
- OpenCV学习代码记录——人脸检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- 使用Ubuntu
一.ubuntu把文件夹名称改为中文 vim ~/.config/user-dirs.dirs 修改文件内容为: XDG_DESKTOP_DIR="$HOME/Desktop" X ...
- Seaslog安装和参数配置
详细文档访问:https://github.com/Neeke/SeasLog/blob/master/README_zh.md 源码安装步骤: 1.先下载Seaslog源码,下载地址:http:// ...
- dos命令dir查找文件的用法及实例
功能:显示目录命令 格式:dir[盘符][路径][/W][/P][/L][/O:排序][/A:属性][/S] 参数介绍: /W -- 以宽行排列方式显示. /P -- 每显示满一屏停顿一下,待用户 ...
- EasyUI tab问题记录
1. 关闭当前tab 此代码放在 布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...
- MySQL 5.6新特性 -- crash-safe replication
在slave上有两个线程:io线程和sql线程io线程接收master的二进制日志信息并写入到本地的relay log中:sql线程执行本地relay log中的信息.io线程读取到的二进制日志当前位 ...
- selenium是如何启动浏览器的
前几天有同学问到selenium是怎么样启动浏览器的(selenium启动浏览器的原理),当时稍微讲解了一下,不过自我感觉不够具体,现在特地把启动原理通过代码和一系列操作给串联起来,希望可以帮助大家更 ...
- php验证码--图片
这里我们介绍图片验证码的制作,有关字符验证码能够參考下面文章: 点击打开链接 图片验证码的制作分三步: 1.制作图片库 2.随机选取一张图片 3.输出图片内容 代码例如以下(这里为了方便我直接用的本地 ...
- 把linux的man手册转化为windows下可读的格式
原文链接: http://www.linux521.com/2009/system/200904/1542.html 把linux的man手册转化为windows下可读的格式 我也是一个Linux学习 ...
- 将csv的数据导入mysql
手头有一份8MB的CSV文件需要分析,对于程序员来说,还有比在数据库里分析更愉快的事情吗? 所以让我们把CSV导入MYSQL吧. 一.首先按照文件列数创建相应的SQL表 例如: DROP TABLE ...