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

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

news2024/11/27 1:18:32

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>