原生实现双向数据绑定小案例

数据劫持: 利用 Object.defineProperty 可以修饰对象的属性, 进行对象属性的 获取 和 设置的劫持

<input type="text">
<h4></h4>

// 1. 视图改变，数据跟着改变
// 2. 数据改变，视图跟着改变


let h4 = document.querySelector('h4')
let input = document.querySelector('input')
// 情况一：简单数据类型
// let data = 'hello'
// h4.innerText = data
// input.value = data
// input.addEventListener('input', function () {
// 1. 视图改变，数据跟着改变
//   data = this.value
// 2. 数据改变，视图跟着改变
//   h4.innerText = data
// }, false)

// 情况二：复杂数据类型
let data = { msg: 'hello' }
h4.innerText = data.msg
input.value = data.msg
let temp = data.msg
input.addEventListener('input', function () {
// 1. 视图改变，数据跟着改变
data.msg = this.value
}, false)
Object.defineProperty(data, 'msg', {
// get() {
//   return temp // 不可以return data.msg 会死循环
// },
set(value) {
// 2. 数据改变，视图跟着改变
temp = value // 不可以data.msg = value 会死循环
h4.innerText = temp
input.value = temp
}
})

• 点赞
• 收藏
• 分享
• • 文章举报

Jason秀啊 发布了88 篇原创文章 · 获赞 3 · 访问量 814 私信 关注

标签：原生,h4,绑定,value,视图,双向,msg,input,data
来源： https://blog.csdn.net/qq_44704740/article/details/104130800