关于简单的数据双向绑定原理，defineProperty 和Proxy演示
双向绑定，也就是说js中的数据传到页面，页面中的内容到js，实现同步更新，简单的演示可以直接复制下放HTML代码运行。
在这个例子中，我们使用defineProperty ，Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。详细信息可以自行查看MDN文档。
简单来说，defineProperty 就是一个监听器，监听对象中某一个属性被访问和修改，在Vue2.0中就是采用defineProperty
注意事项
- 在使用get函数监听属性的时候，不能直接监听当前属性，否则会出现死循环。所以在使用前我将对象进行浅拷贝的原因
- 每一个defineProperty只能对一个对象属性进行监听，所以你必须在使用之前就得知道属性的名字，但是很多时候属性是动态生成的，，所以就很麻烦。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> <h1 id="hname"></h1>
<input type="text" id="inputname">
</body> <script>
let stu = {
name: ""
}
let newstu = { ...stu };//浅拷贝
//监听器
Object.defineProperty(stu, "name", {
get() {
return newstu.name;
},
set(val) {
if (val === newstu.name) return;
newstu.name = val;
doubleBind();
}
})
//将数据传到页面中
function doubleBind() {
document.querySelector("#hname").innerHTML = stu.name;
inputname.value = stu.name;//id可以直接使用
}
//输入框事件，将页面中数据返回
inputname.oninput = function () {
stu.name = inputname.value;
}
doubleBind()
setTimeout(() => {
stu.name = "Mary";
}, 1000)
</script> </html>
defineProperty的弊端很明显，在ES6中提出了Proxy， 在Vue3.0中也将使用Proxy代替defineProperty，在Proxy中，我们可以在监听整一个对象属性的变化。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> <h1 id="hname"></h1>
<input type="text" id="inputname">
</body> <script>
let stu = {
name: "12354"
} //监听器处理函数 //监听器
stu = new Proxy(stu, {
get(target, prop) { return target[prop];
},
set(target, prop,val){
if (val === target.prop) return;
target[prop] = val;
doubleBind();
}
});
//将数据传到页面中
function doubleBind() {
document.querySelector("#hname").innerHTML = stu['name'];
inputname.value = stu['name'];//id可以直接使用
}
//输入框事件，将页面中数据返回
inputname.oninput = function () {
stu['name'] = inputname.value;
}
doubleBind()
setTimeout(() => {
stu['name'] = "Mary";
console.log(stu);
}, 1000)
</script> </html>
对比两个例子，眼尖的friend会发现，第一个例子中我访问对象属性使用的是stu.name,而在第二个例子中使用的是stu['name']的方式。在《javascript高级程序设计》
引用类型的那一章提到：一般来说，访问对象属性时使用的都是点表示法，这也是很多面向对象语言中通用的语法。不过，
关于简单的数据双向绑定原理，defineProperty 和Proxy演示的更多相关文章
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动 组件系统 1 2 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于definePropert ...
- vuejs数据双向绑定原理（get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- 前端数据双向绑定原理:Object.defineProperty()
Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...
- [JS] 数据双向绑定原理
通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...
- Vue的数据双向绑定原理——Object-defineProperty
一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...
随机推荐
- CSS定位(Positioning)
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 一切皆为框 div.h1 或 ...
- 日期类&&包装类&&System类&&Math类&&Arrays数组类&&大数据类
day 07 日期类 Date 构造函数 Date():返还当前日期. Date(long date):返还指定日期 date:时间戳--->距离1970年1月1日 零时的毫秒数 常用方法 日期 ...
- python server端并发聊天
---------------------------server.py---------------------import socketserver class MyServer(socketse ...
- web页面的重构和回流【转载】
在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的? 浏览器的渲染过程: 1.处理HTML脚本,生成DOM树(DOM树里包含所有的HTML标签,包括display:none和js动态添加的元 ...
- JAVA基础笔记15-16-17-18
十五.今日内容介绍 1.Object 2.String 3.StringBuilder =第一节课开始======================= 01API概念 * A:API(Applicati ...
- Docker Compose部署 EFK（Elasticsearch + Fluentd + Kibana）收集日志
简述 本文用于记录如何使用Docker Compose部署 EFK(Elasticsearch + Fluentd + Kibana) 收集Docker容器日志,使用EFK,可以无侵入代码,获得灵活, ...
- PE文件格式详解（五）
0x00 前言 前一篇了解了区块虚拟地址和文件地址转换的相关知识,这一篇该把我们所学拿出来用用了.这篇我们将了解更为重要的一个知识点——输入表和输出表的知识. 0x01 输入表 首先我们有疑问.这个输 ...
- 最新MySQL入门篇
一.SQL简介 SQL:结构化查询语言(Structured Query Language),是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系 ...
- 数据可视化之powerBI基础（二）PowerBI动态图表技巧：钻取交互
https://zhuanlan.zhihu.com/p/64406366 查看可视化图表的时候,我们可能想深入了解某个视觉对象的更详细信息,或者进行更细粒度的分析,比如看到2017年的总体数据,同时 ...
- 数据可视化之powerBI入门（十一）认识Power BI数据分析语言DAX
DAX是英文Data Analysis Expression的缩写,意思是数据分析表达式,从名称上就可以看出,DAX公式是用作数据分析的,事实上也确实如此,从数据分析层面认识DAX会更有助于我们理解它 ...