原生实现双向数据绑定

数据劫持: 利用 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()方法当数据被使用时触发
	// get() {
	//   return temp // 不可以return data.msg 会死循环
	// },
	// set()方法数据改变时触发，接受一个参数，该参数表示新值
	set(value) {
		// 2. 数据改变，视图跟着改变
		temp = value // 不可以data.msg = value 会死循环
		h4.innerText = temp
		input.value = temp
	}
})