浅谈Vue之双向绑定
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。那么Object.defineProperty究竟是该如何使用的呢？先看个例子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="app">
<h5 id="txtShow"></h5>
<input type="text" id="txt">
</div>
<script>
// mvvm 分为model(模型) view(视图) viewModel(视图模型)
// model 用来存储数据
// view 用来展示数据
// ViewModel 关联数据,和model实现双向绑定。 // 通过Object.defineProperty 定义一个属性
// 通过此方法为对象设置属性的时候 对象的属性值会包含一个get和set方法
// 当修改对象值得时候回触发相应的函数调用
// 参数一 需要定义属性的对象
// 参数二 属性名字
// 参数三 对象属性的修饰内容
// 在set方法中做一些处理，执行页面的刷新和回调
var model = {}; //创建一个新对象
var vm = '';
Object.defineProperty(model, 'txt', {
set: function (val) {
console.log('设置属性值');
console.log(val);
vm = val;
txtShow.innerHTML = this.txt;
},
get: function () {
console.log('获取属性值');
console.log(this);
return vm;
},
enumerable: true, //可枚举，默认false
configurable: true //该属性描述符能够被改变，同时该属性也能从对应的对象上被删除。默认false
}) var txtShow = document.getElementById('txtShow'),
txt = document.getElementById('txt'); txt.onkeyup = function () {
if (event.keyCode == 13) {
model.txt = txt.value;
}
}
</script>
</body> </html>
通过上面的代码我们可以看到，在控制台，无论是改变vm的值还是model.txt的值，所对应的的，对方的值也会相应的改变，由此，这里我们就实现了双向绑定。
对于Object.defineProperty() ,大家应该都见过，只是认知的程度有所不同。
根据MDN web docs 中解释说： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)参数
obj- 要在其上定义属性的对象。
prop- 要定义或修改的属性的名称。
descriptor- 将被定义或修改的属性描述符。
返回值
被传递给函数的对象。
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。
数据描述符和存取描述符均具有以下可选键值：
configurable- 当且仅当该属性的 configurable 为 true 时，该属性
描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。 enumerable- 当且仅当该属性的
enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。enumerable定义了对象的属性是否可以在for...in循环和Object.keys()中被枚举。 -
数据描述符同时具有以下可选键值：
value- 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为
undefined。 writable- 当且仅当该属性的
writable为true时，value才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值：
| configurable | enumerable | value | writable | get | set | |
| 数据描述符 | YES | YES | YES | YES | NO | NO |
| 存取描述符 | YES | YES | NO | NO | YES | YES |
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。
记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 Object.prototype，明确指定所有的选项，或者通过 Object.create(null)将__proto__属性指向null。
在日常运用中，那你需要明白：
var o = {};
o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : true,
configurable : true,
enumerable : true
});
// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : false,
configurable : false,
enumerable : false
});
下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
看到这个例子，你心中是不是有了些许想法？后面还有很多知识点，有需要的可以去MDN进行更加深入的了解，谢谢！
浅谈Vue之双向绑定的更多相关文章
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
随机推荐
- Zookeeper运维问题集锦
实际工作中用到Zookeeper集群的地方很多, 也碰到过各种各样的问题, 在这里作个收集整理, 后续会一直补充; 其中很多问题的原因, 解决方案都是google而来, 这里只是作次搬运工; 其实很多 ...
- JAVA RPC (五) 之thrift序列化RPC消息体
让大家久等了.继续更新thrift序列化的消息体,下面我们一步一步的看一看thrift的rpc是怎么实例化消息体的. 首先我们先准备一个request文件 namespace java bky str ...
- WinAPI 字符及字符串函数(15): CharNext、CharPrev
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- 2018-2019-2 网络对抗技术 20165225 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165225 Exp3 免杀原理与实践 一.实验说明 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),vei ...
- 学号20175313 《实现Linux下cp XXX1 XXX2的功能(一)》第九周
目录 MyCP 一.题目要求 二.题目理解 三.需求分析 四.设计思路 五.伪代码分析 六.代码链接 七.代码实现过程中遇到的问题 八.运行结果截图 九.参考资料 MyCP 一.题目要求 编写MyCP ...
- 【LeetCode每天一题】Simplify Path(简化路径)
Given an absolute path for a file (Unix-style), simplify it. Or in other words, convert it to the ca ...
- Github上36893颗星！这个被称为下一代企业级应用首选技术你学了么？
用一句话概括:这个技术,是JAVA后端框架的龙头老大,执牛耳者.这个技术就是: Spring Boot春靴. Spring Boot到底凭什么成为Java社区最具影响力的项目?说直白点,他爹Spr ...
- Scala面向对象详解
Scala的包(作用域) package com.jh.scala 等同于 package jh \n package scala 等同于 package com.jh{ package scala ...
- PHP fwrite 函数：将字符串写入文件（追加与换行）
PHP fwrite() fwrite() 函数用于向文件写入字符串,成功返回写入的字符数,否则返回 FALSE . 语法: int fwrite( resource handle, string s ...
- java代码审计中的一些常见漏洞及其特征函数
文章来源:https://xz.aliyun.com/t/1633 最近在先知上看到之前有篇关于java代码审计的文章总结的蛮好,记录以下特征函数,方便查阅,同时自己也会将在平时代码审计过程中积累的函 ...