Vue-19、Vue监测数据的原理

Vue-19、Vue监测数据的原理_对象

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>