数据的双向绑定

mvvm是一种设计模式，解决了双向数据绑定（效果：数据改变了，视图也跟着变化）的问题

其中,m代表视图层，v代表模型层,vm代表视图模型层

实现思路----vm实例（vue实例充当了数据和视图之间的桥梁作用)

 问题分析：

从数据到视图-----响应式原理

1.怎么知道数据变了

  <!-- 显示obj.a的内容 -->
    <div id="app">
        1
    </div>
    <script>
        let obj={a:5}
        // 检测到属性值的变化，并捕捉到
        Object.defineProperty(obj,'a',{
            set:function(newVal) {
                // alert(`更改之后的属性值为${newVal}`)
                // const app=document.getElementById("app")
                // console.log(app);
                // 更新dom的内容
                document.getElementById('app').innerHTML=newVal
            }
        })
    </script>

2.怎么实现数据改了，多处视图跟着改变

set可以检测到属性值的改变 ，获取到元素的内容并把后面改变的值赋给该元素的内容

dom中内容的改变

例子

  <!-- 显示obj.a的内容 -->
    <div id="app">
        1
    </div>
    <script>
        let obj={a:5}
        // 检测到属性值的变化，并捕捉到
        Object.defineProperty(obj,'a',{
            set:function(newVal) {
                // alert(`更改之后的属性值为${newVal}`)
                // const app=document.getElementById("app")
                // console.log(app);
                // 更新dom的内容
                document.getElementById('app').innerHTML=newVal
            }
        })
    </script>

你如何得知，我在什么时候，改了哪个属性值 

<script>
        const obj={a:2,b:3,d:4}
        // 你如何得知，我在什么时候，改了哪个属性值
        for(let key in obj) {
            console.log(key);
            Object.defineProperty(obj,key,{
            set:function(newVal) {
                console.log(`有人改了${key}`,`改成了${newVal}`);
            }
          })
        }
        
    </script>

Object.defineProperty()  里面的set和get可以拦截到数据变化 set当对象的属性变化时触发

get把变化后的属性值返回出去

响应式原理  作用 更精细化定义（添加，修改）对象的属性

参数1---obj：要定义属性的对象

参数2---property：要定义或修改的属性名

参数3---descriptor：对参数2的描述，是一个具有固定属性的字面对象

<script>
        // 格式：Object.definePropery(obj,prop,descriptor)
        // 声明一个obj对象 属性名为a 属性值为1
        // 原始的声明方式
        const obj={a:1}
        console.log(obj);
        // 精细化的定义对象的方式
        Object.defineProperty(obj,'b',{
            // 定义属性b的初始值就是value的值
            // 没有定义值就是undefined
            value:3,
            // 可读写 可以修改属性b的属性值
            writable:true
        })
        Object.defineProperty(obj,'c',{
            // 不写value属性 
            // c属性的初始值就是undefined
            // value:''
            // 只读 不可改变
            // writable:false
            configurable:false,
            // 两个特点：1.不能用Object.defineProperty再次定义
            // 2.不能删除这个属性
            // enumerable为true 这个对象的属性可以遍历
            enumerable:true
        })
        Object.defineProperty(obj,'d',{
            value:13,
            // enumerable为true 这个对象的属性不可以遍历 例如:d,b
            enumerable:false
        })
        for(let k in obj) {
            console.log(k);
            console.log(obj[k]);
        }
        // 会报错 不能重复定义c属性
        // Object.defineProperty(obj,'c',{
        //     value:12
        // })
        delete obj.c
        // c的属性值没有改变还是undefined
        obj.c=5
        obj.b=10
        // Object.getOwnPropertyDescriptor(参数1:要操作的对象,属性)
        console.log(obj);
    </script>

 // 会报错 不能重复定义c属性

        // Object.defineProperty(obj,'c',{

        //     value:12

        // })

 

a属性是可以修改的 writable的值true 

 

 getOwnPropertyDescriptor(参数1：要操作的对象,参数2：要操作的属性) 获取自己对象的描述