浅谈本项目中的数据双向绑定，修改对象属性以及数组

用习惯angular.js之后，大多数开发者再学习vue的话，其实总体来说，是比较好上手的，但是归于一些细节，还是有不同的，比如数据的双向绑定。

先来看一下vue中修改对象的属性：

//html代码
<div id="message">
    <div>
        {{obj.title}}
    </div>
    <button @click="changeObjTitle">更换对象的title属性</button>
</div>

//js代码
<script>
    var app = new Vue({
        el: '#message',
        data: {
            message: 'Hello Vue!',
            obj : {
                'title' : 'This a obj.',
                'content' : '……'
            }
        },
        methods : {
            changeObjTitle : function () {
                this.obj.title = 'This a change obj title';
            },
        }
    })
</script>

还好，这个和angular.js的数据双向绑定是一样的，这里不多说，看以上代码就能明白。

来看一下数组的操作：

//html代码
 <div v-for="item in arr">
    {{item.index}}
</div>
<button @click="changeArr">更改数组</button>
<button @click="change">更改数组</button>

<script>
    var app = new Vue({
        el: '#message',
        data: {
            message: 'Hello Vue!',
            obj : {
                'title' : 'This a obj.',
                'content' : '……'
            },
            arr : [{
                'index' : 1
            },{
                'index' : 2
            },{
                'index' : 3
            },{
                'index' :4
            }]
        },
        methods : {
            changeObjTitle : function () {
                this.obj.title = 'This a change obj';
            },
            changeArr : function () {
                this.arr[0].index = 'hahah';
            },
            change : function () {
                this.arr[0] = {
                    'index' :'heheh'
                }
                console.log(this.arr);
            }
        }
    })
</script>

先来看一下changeArr的效果，当然结果和预期的一样：

再来看看change的效果：

我们发现，change方法并没有触发vue页面中的重新渲染，而在控制台中打印的数组确实已经变化了，WHY？

由于javascript的限制，vuejs不能检测到下面数组的变化：

直接索引设置元素，如vm.item[0]={};
修改数据的长度，如vm.item.length。

为了解决问题，Vuejs扩展了观察数组，为它添加一个$set()方法：

如何使用，这里不必多说了，给一个示例

一个简单的数组位置替换。

再附上一个vue比较常见的问题的传送门，写得很好。
https://segmentfault.com/a/1190000005832164