MVVM

image.png

image.png

image.png

data中所有属性，最后都出现在了vm上，
vm身上所有的属性以及vue原型上所有属性，在vue模板中都可以直接使用

get 和 set

    <script type="text/javascript">
        //Vue.config.productionTip = false
        let number = 18
        let person = {
            name :'zhangdan',
            sex:'male'
        }// 可以被枚举(遍历)
        Object.defineProperty(person,'age',{
            // value:18,
            // //age原本不可被枚举（遍历）,若想被枚举，写 enumerable:true
            // // 控制属性是否可以枚举，默认值false
            // writeable:true, //控制属性是否能被修改，默认值false
            // configurable:true,//控制属性是否能被删除，默认值false

            //当有人读取person的age属性时，get函数(getter)会被调用，且返回值是age的值
            get:function () {
                return number
            },
            //当有人修改person的age属性时，set函数(setter)会被调用，且会收到修改的具体值
            set(value) {
                console.log('someone changed the value of age, and it will be ' , value)
            }
        })
        //
        console.log(person)
        // 将person.age改成20后，控制台会输出。
        // 但是下次访问person时，age显示的值还是18
        // 若修改number为20时，下次访问person时，person.age的值为20
    </script>

数据代理

def:通过一个对象代理对另一个对象中的属性操作 读/写

    <script type="text/javascript">
        let obj = { x:100 }
        let obj2 = { y:200 }
        // 通过obj2来操作x
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(v) {
            obj.x = v
            }
        })
    </script>