1、数据代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue监测数据改变的的原理</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学校地址：{
{
address}}</h2>
<h2>学校名称：{
{
name}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:"#root",
data:{
address:'重庆',
name:'重庆大学',
},
})
</script>
</body>
</html>
2、模拟一个数据监测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟一个数据监测(对象)</title>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
let data = {
name: '尚硅谷',
address: '北京'
};
//创建一个监视的实例对象，用于监视data中属性变化
const obs = new Observer(data);
console.log(obs);
//准备一个vm实例
let vm = {
};
vm._data= data = obs;
function Observer(obj) {
//汇总所有属性形成一个数组
const keys = Object.keys(obj);
//遍历
keys.forEach((k) => {
Object.defineProperty(this, k, {
get() {
return obj[k];
},
set(v) {
obj[k] = v;
}
})
})
}
</script>
</body>
</html>
