Vue源码解读——实现一个双向绑定（Object.defineProperty与observe）

什么是双向绑定

在vue中，实现一个mvvm的双向绑定很简单
关键词：Object.defineProperty与observe

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{
   {
   word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
     
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

这里演示了一旦我们改变了word，那么视图中的与word绑定的也就自动更新了。

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

• 发布者-订阅者模式（backbone.js）
• 脏值检查（angular.js）