响应式数据实现原理
响应式数据实现的原理：利用 JS 的 Proxy 对象。
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，其实就是直接监控值的修改，当值发生改变的时候，可以监控到。id 元素可以不用获取
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let data = {
message: "hello world"
}
data = new Proxy(data, {
// set 方法用于拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性、属性值和 Proxy 实例本身，其中最后一个参数可选。
set(target, key, value) {
console.log(target, key, value)
app.innerHTML = value
},
// get 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性和 Proxy 实例本身，其中最后一个参数可选。
get(target) {
console.log("get")
console.log("target", target)
return target.message
}
})
// 代理对象，会触发 data 的 get 方法
app.innerHTML = data.message
setTimeout(() => {
// 代理对象，会触发 data 的 set 方法
data.message = "hi vue"
}, 2000)
</script>
</body>
</html>