简单实现MVVM中VM底层的双向数据绑定的原理

v-model数据的双向绑定实际上在底层是使用了Object.defineProperty()方法

js代码及详解如下：

    //1 模拟一个数据对象
    let data = {
        name: 'Charlene',
        love: 'study'
    }
    //2 获取input输入框
    let ipt = document.querySelector('input')
    ipt.value = data.name
    // console.log(ipt)
    //注意:参数2中的属性一定是字符串格式!!!!!
    //Object.defineProperty(数据所在的对象,'属性',{set(){},get(){}})实现数据劫持
    //Object.defineProperty是es5的语法,它是一个无法shim的,不兼容ie8及以下
    //3 使用一个全局的中间变量来进行接收新赋值的参数---> 才能给get方法进行使用
    let temp
    Object.defineProperty(data, 'name', {
        //es6新语法 属性值是方法时直接使用属性名作为方法名
        //Object.defineProperty()里面自带的set/get方法
        //set 方法用来赋值(在赋值时会调用set()方法) set(赋值的参数)
        //get 方法用来获取值(在获取值时会调用get()方法)
        set(val) {
            temp = val
            console.log('我是set方法,赋值时被调用的')
            //4 将新赋值的name值赋值给输入框  -->实现的就是M--->V
            ipt.value = temp
        },
        get() {
            console.log('我是get方法,获取值时被调用的')
            //注意：没有return的话获取值时是undefined
            return temp
        }
    })
    //对输入框进行监听-->oninput方法可以实时监听输入框的改变
    ipt.oninput = function () {
        //5 输入框改变了data的name值应该也要跟着改变 --->实现的就是V---->M
        ////获取到改变之后的值赋值给data中的name
        data.name = ipt.value
    }
    // console.log(temp)