Vue双向绑定实现原理
2023-02-18 16:30:14 时间
实现双向绑定需要Object.defineProperty,需要了解劫持对象的属性后获取对象的属性会触发get函数,更改对象属性值会触发set函数
<div id="demo"></div>
<input type="text" id="inp">
let obj = {}
let demo = document.getElementById("demo")
let inp = document.getElementById("inp")
Object.defineProperty(obj, 'name', {
get() {
console.log('已获取')
return val
},
set(val) {
console.log('已赋值')
demo.innerHTML = val
}
})
inp.addEventListener('input', e => {
obj.name = e.target.value
})
以上代码在input框输入内容时会给obj.name赋值就会触发set函数
在读取name属性例如let a=obj.name就会触发get函数并将return的值赋给a
相关文章
- 常见算法合集[java源码+持续更新中...]
- 分布式事务(二)Java事务API(JTA)规范
- 北漂不易,逆风前行[给想在北京工作的java同学们诚恳的建议!]
- Java工程师的生活、读书、技术栈
- 十大基础排序算法[java源码+动静双图解析+性能分析]
- 分享两个免费下载Windows系统镜像
- CSRF-跨站请求伪造-相关知识
- 在VMware上安装Metasploitable2
- SSRF-服务器端请求伪造-相关知识
- RCE-远程命令执行和代码执行漏洞-知识
- 文件包含漏洞-知识点
- 包含漏洞-读写文件以及执行命令
- XXE-XML外部实体注入-知识点
- Ninjutsu_v3_08_2020-安全渗透系统安装
- 单兵渗透工具-Yakit-Windows安装使用
- SpringBoot-快速搭建并快速验证是否可用
- Metasploit-模块介绍
- Kali-登录暴力破解器工具-medusa使用
- PS软件下载及安装Photoshop cc 2018下载链接及安装教程(包括2023版本)
- 顺应时代趋势,CSN的安全可控之路