关于简单的数据双向绑定原理，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方法实现的,俗称属性拦截 ...
随机推荐
- jmeter使用小结（一）
jmeter是用来做接口压力测试的工具.这里只是简单介绍一下使用,大家可以自行查看帮助文档, 1.打开jmeter工具,创建线程组任务 2.添加配置元件,根据需要选择设置 3.添加采样器,这里是htt ...
- vue全家桶（4.1）
5.状态管理 5.1.兄弟组件之间共享数据的问题? 首先,我们需要了解下兄弟组件之间如何共享数据的问题 完成下列需求: 1.点击按钮,改变商品数量 2.点击加入购物车,在购物车的这个div盒子里需要显 ...
- 不就是语法和长难句吗—笔记总结Day2
6.区别定语从句和同位语从句 I have a dream that sounds funny. (定语从句) I have a dream that I will become a rich man ...
- 编译Spring5.2.0源码
下载 spring-framework-5.2.0.RELEASE.zip https://github.com/spring-projects/spring-framework/releases 下 ...
- scrapy框架结构与工作原理
组件: ENGINE:引擎,框架的核心,其他组件在其控制下协同工作. SCHEDULER:调度器,负责对SPIDER提交的下载请求进行调度 DOWNLOADER:下载器,负责下载页面,发送HTTP请求 ...
- 最快安装AndroidStudio的方法(小歪整理)
最快安装AndroidStudio的方法(小歪整理)-干货,加速加载和解决无法预览布局文件的等问题 最快安装AndroidStudio的方法(小歪整理) 1.使用解压压缩包的方式安装:android- ...
- 小米商城项目（JSP+Servlet项目）
小米商城项目 项目已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号 码出Offer 领取各种学习资料! 在这里插入图片描述 基于Servlet+JSP开发的小米商城项目,因为 ...
- 每日一题 - 剑指 Offer 47. 礼物的最大价值
题目信息 时间: 2019-07-02 题目链接:Leetcode tag:动态规划 难易程度:中等 题目描述: 在一个 m*n 的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于 0). ...
- P5676 [GZOI2017]小z玩游戏 Tarjan+优化建图
题目描述 分析 一开始看到这道题,首先想到的就是建好边后跑一个Tarjan缩点,将siz大于1的节点统计一下,输出结果 Tarjan非常显然易得,关键就是怎么建边 比较好想的一种思路就是枚举每一个兴奋 ...
- Numerical Sequence（hard version)，两次二分
题目: 题意: 已知一个序列: 112123123412345123456123456712345678123456789123456789101234567891011... 求这个序列第k个数是多 ...