关于简单的数据双向绑定原理，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方法实现的,俗称属性拦截 ...
随机推荐
- Android Studio 插件 ADBWifi 无线调试真机
长话短说,步骤如下 Android Studio 安装插件 ADB Wifi.这一步可以选择AS->Settings->Plugins->Market搜索:或者可以选择去插件官网下载 ...
- SpringBoot--swagger搭建、配置及使用
一. 作用: 1. 接口的文档在线自动生成. 2. 接口测试. 二.模块介绍 Swagger是一组开源项目,其中主要要项目及功能如下: 1.Swagger Codegen: 通过Codegen 可以将 ...
- Python 3.10 版本采纳了首个 PEP，中文翻译即将推出
现在距离 Python 3.9.0 的最终版本还有 3 个月,官方公布的时间线是: 3.9.0 beta 4: Monday, 2020-06-29 3.9.0 beta 5: Monday, 202 ...
- （私人收藏）[开发必备]最全JQuery离线快速查找手册（可查询可学习，带实例）
[开发必备]最全JQuery离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/16bUd4iA3p0c5RHbzaC60IQe4zh
- web开发，前后分离接口规范
1. 前言 随着互联网的高速发展,前端页面的展示.交互体验越来越灵活.炫丽,响应体验也要求越来越高,后端服务的高并发.高可用.高性能.高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长 ...
- 微软全球资深副总裁对 VS Code 黑宝书的推荐序！VS Code 月活用户已达 1200 万！
前不久,首本 VS Code 中文书终于问世了! 在本书出版之前,我很高兴能邀请到微软全球资深副总裁 Julia Liuson 为本书写推荐序!下面,我们就来看一下 Julia 所写的推荐序的完整内容 ...
- java学习第二天 20207/7
一. 1.对传参进行了了解 2. 2.java的变量命名与c/c++有些不同在java中有￥,字母,下划线和数字,同样不可以是数字开头. java的布尔型为boolean 各个数据类型的信息: 注意: ...
- 【题解】p2388阶乘之乘
原题传送门 题解一堆\(O(n)\)算法真给我看傻了. 考虑\(10=2*5\),因子2肯定更多,所以计算因子5的个数即可. 从5到n这\(n-5+1\)个数的阶乘里面,都各自含有一个因子\(5=1* ...
- 北航2018级算法期末上机实录随笔1st
简单记录下题目类型和做题情况,理性复习同时也希望提供一些参考 题目描述 共计八个题目,按照助教的划分,题目分类如下 一个签到(二分查找),两个板子(活动选择.KMP(洛谷kmp模板题)),一个板子变形 ...
- ## Java基础(二)：变量类型
Java 变量类型 一.局部变量:类的方法中的变量 局部变量声明在方法.构造方法或者语句块中: 局部变量在方法.构造方语句块中被执行的时候创建,当他们执行完成后,变量被销毁 访问修饰符不能用于局部变量 ...