Object.defineProperty オブジェクトとオブジェクト ハイジャックには、次の利点があります。
1. Object.defineProperty オブジェクトとオブジェクト ハイジャック + Vue2 のパブリッシュ/サブスクライブ モードなどの明示的な呼び出しは必要なく、
データが変更される限り、直接通知されます。変更を加えてビューの更新を推進します。
2. データの変更はset関数で正確に知ることができ、ドライバーはそれを更新しようとします
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 数据代理的demo（通过一个对象代理对另一个对象属性的操作） -->
</head>
<body>
<div id="app">
我们是web2208班
</div>
<script type="text/javascript">
/* var a = {age:20}
var b = {height:30}
Object.defineProperty(b,'age',{
get(){
return a.age
},
set(val){
a.age = val
}
}) */
/* var data = {
msg:'张三',
age:40
}
var vm = {}
Object.defineProperty(vm,'msg',{
enumerable:true,
configurable:true,
get(){
return data.msg
},
set(newval){
data.msg = newval
document.querySelector('#app').textContent = newval
}
})
vm.msg="Hello 响应式原理" */
let data = {
msg: 'Hello Vue',
count: 0
}
let vm = {}
function defineProperies(data) {
Object.keys(data).forEach(key => {
Object.defineProperty(vm, key, {
enumerable: true,
configurable: true,
get() {
return data[key]
},
set(newval) {
data[key] = newval
document.querySelector('#app').textContent = newval
}
})
})
}
defineProperies(data)
vm.count = "111111";