vue数据双向绑定原理

 

• 当前台显示的view发生变化了，它会实时反应到viewModel上，如果有需要，viewModel 会通过ajax等方法将改变的数据 传递给后台model
• 同时从后台model获取过来的数据，通过vm将值响应到前台UI上

vm的核心是view 和 data 

当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
而view 发生改变则是通过底层的input 事件来进行data的响应更改

 

1. vue数据双向绑定的原理。

2. 实现简单版vue的过程，主要实现{{}}、v-model和事件指令的功能。

实例代码和效果图

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

控制台可以看到属性a有两个相对应的get和set方法

vue数据双向绑定原理 

vue是通过Object.defineProperty()来实现数据劫持的。

Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set，如果还不熟悉其用法，请点击这里阅读更多用法。 

 

具体请参考：详细解释