Vue MVVM与数据代理

MVVM

M: model 模型 对应data数据
V: 视图 模板 其实就是html页面
VM: 视图模型 对应vue实例对象

vm通过dom listener和data-binding 为页面和数据建立连接

V <---> VM <---> M

数据代理

通过一个对象代理另一个对象中属性的操作, 其实就是使用defineProperty，将一个对象的get set操作另一个对象

<script src="../lib/vue.js"></script>
<body>
    <div id="root">
    </div>
    <script type="text/javascript">
        let person = {
            name: 'island',
            age: 1,
            hair:100
        }

        Object.defineProperty(person, 'hair', {
            // value: 18,
            enumerable: true, // 是否可以枚举
            // writable: true, // 属性是否可以被修改
            configurable: true, // 属性是否可以被删除
            // 有get和set就不能设置value和writable
            // 读取属性值时调用
            get() {
                return '头发有' + this.value + '根, 功力还不够深厚'
            },
            // 设置属性时用
            set(value){
                console.log('value:', value);
                this.value = value
            }
        })
        
        person.hair = 1000
        console.log(person.hair);

    </script>
</body>

Vue中的数据代理

vm.prop
vm._data === data

_data把data进行了升级，从而能进行响应式操作

把data中的属性，放vm中一份

原理:

vm中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

vm数据代理的好处

更加方便的操作data中的数据

基本原理

将Object.defineProperty把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，指定一个getter/setter
在getter、setter的内部去操作data对应的属性

posted @ 2022-01-29 00:04  IslandZzzz  阅读(26)  评论(0)  编辑  收藏  举报