关于简单的数据双向绑定原理，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方法实现的,俗称属性拦截 ...
随机推荐
- 作为一个Java开发你用过Jib吗
1. 前言 Jib是Google开发的可以直接构建 Java应用的Docker和OCI镜像的类库,以Maven和Gradle插件形式提供.它最骚操作的是可以在没有Docker守护程序的情况下构建,也就 ...
- Navicat15安装激活版教程
navicat15安装 一键式安装,安装包如下 链接:https://pan.baidu.com/s/1VTJmJ7ulUySWoWBu-fugiw 提取码:fz5u 先安装软件包点击安装,一直下一步 ...
- JavaScript基础对象创建模式之命名空间(Namespace)模式(022)
JavaScript中的创建对象的基本方法有字面声明(Object Literal)和构造函数两种,但JavaScript并没有特别的语法来表示如命名空间.模块.包.私有属性.静态属性等等面向对象程序 ...
- 01 . SaltStack部署配置及简单应用
SaltStack简介 SaltStack saltstack是一个新的基础平台管理工具,只需要花费数分钟即可运行起来,可以支撑管理上万台服务器的规模,数秒钟即可完成数据传递. saltstack是使 ...
- WireGuard 教程：WireGuard 的工作原理
原文链接:https://fuckcloudnative.io/posts/wireguard-docs-theory/ WireGuard 是由 Jason Donenfeld 等人用 C 语言编写 ...
- Buy A Ticket（图论）
Buy A Ticket 题目大意 每个点有一个点权,每个边有一个边权,求对于每个点u的\(min(2*d(u,v)+val[v])\)(v可以等于u) solution 想到了之前的虚点,方便统计终 ...
- BUUCTF-Misc-No.3
比赛信息 比赛地址:Buuctf靶场 内心os(蛮重要的) 我只想出手把手教程,希望大家能学会然后自己也成为ctf大佬,再来带带我QWQ 文件中的秘密 | SOLVED | 打开文件,winhex照妖 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（一）： 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- ubuntu docker安装与部署java，mysql，nginx镜像
docker 安装与部署java,mysql,nginx docker 配置 安装docker $ sudo apt-get remove docker docker-engine docker.io ...
- 学习笔记三：基础篇Linux基础
Linux基础 直接选择排序>快速排序>基数排序>归并排序 >堆排序>Shell排序>冒泡排序=冒泡排序2 =直接插入排序 一.Linux磁盘分区表示 Linux中 ...