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的双向数据绑定的更多相关文章

  1. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  2. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  4. 面试题:你能写一个Vue的双向数据绑定吗?

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  6. Vue原理--双向数据绑定

    MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态 ...

  7. Vue之双向数据绑定

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. vue的双向数据绑定原理

    原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...

  9. 深入vue源码,了解vue的双向数据绑定原理

    大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...

随机推荐

  1. mysql乱码问题解决办法

    最近开发一下小项目,遇到了最常见的乱码问题. 1.数据库使用utf-8  utf-8_generic_ci编码,使用csv上传并导入数据,插入数据的时候出现了问题,有很大部分数据没有被导入,所以使用m ...

  2. C# 给枚举类型增加一个备注特性

    /// <summary> /// 备注特性 /// </summary> public class RemarkAttribute : Attribute { /// < ...

  3. Atitit 提升进度的大原则与方法  高层方法  attilax总结

    Atitit 提升进度的大原则与方法  高层方法  attilax总结 生产力的提升点 1.1. 管理,管理的发展发展非常缓慢,1 1.2. 方法论(前后分离,dsl等)1 1.3. 工具( 工具链 ...

  4. CHKDSK/f

    chkdisk c: /f

  5. js中$

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...

  6. Paypal Rest Api自定义物流地址(跳过填写物流地址)

    PayPal之前的Rest Api是不支持自定义物流地址的,最新升级版本的提供了这个服务(Payment Experience),大概步骤如下: 1.申请一个自定义的配置ID 自定义配置包括Logo, ...

  7. c++ 出现“ error LNK2019: 无法解析的外部符号 该符号在函数 中被引用"错误原因

    一般问题出在 (1)XXX.lib头文件,这个要包含(不然编译也不能通过) (2)需要XXX.lib或XXX.dll库.手动添加,项目->属性->配置属性->链接器->输入 然 ...

  8. ubuntu GCC 版本切换

    (1)  查看gcc以及g++的版本 gcc  -v g++ -v star@ai:~ $ gcc -v Using built-in specs. COLLECT_GCC=gcc COLLECT_L ...

  9. OpenResty 最佳实践 1

    建议先搜索<OpenResty最佳实践.pdf> 到网上下载openresty-1.13.6.1-win32 考虑到操作方便性,建议建立个bin目录,放入系统目录中,生成 nginx-st ...

  10. java.sql.SQLException: ORA-01578: ORACLE 数据块损坏问题解决办法

    错误信息: java.sql.SQLException: ORA-01578: ORACLE 数据块损坏 (文件号 17, 块号 315703) ORA-01110: 数据文件 17: 'D:\ORA ...