不清楚请先看第一篇文章！
浅浅解析vue对象响应式原理，对象响应式处理实际上就是使用for in 遍历当前对象，把对象里面的所有元素绑定到this对象里面，从而实现使用this调用来触发defineProperty的set方法更新data对象。
<head>
<meta charset="utf-8">
<title></title>
<div id="app">
<div id="name">
test
</div>
<div id="age">
10
</div>
<div id="hobby">
sing
</div>
</div>
</head>
<body>
</body>
<script>
// 模拟 Vue的data
let data = {
name: 'test',
age: 18,
hobby: '唱，跳，rap，篮球'
}
getDefineProperty()
function getDefineProperty() {
for (let item in data) {
Object.defineProperty(this, item, {
get() {
console.log('执行get')
return data[item];
},
set(newValue) {
console.log('执行set')
// 相同数据去除
if (newValue === data[item]) return
data[item] = newValue
document.querySelector('#name').textContent = data.name
document.querySelector('#age').textContent = data.age
document.querySelector('#hobby').textContent = data.hobby
}
})
}
}
</script>
运行测试
