用習(xí)慣angular.js之后，大多數(shù)開發(fā)者再學(xué)習(xí)vue的話，其實(shí)總體來說，是比較好上手的，但是歸于一些細(xì)節(jié)，還是有不同的，比如數(shù)據(jù)的雙向綁定。

先來看一下vue中修改對(duì)象的屬性：

//html代碼
<div id="message">
    <div>
        {{obj.title}}
    </div>
    <button @click="changeObjTitle">更換對(duì)象的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>

還好，這個(gè)和angular.js的數(shù)據(jù)雙向綁定是一樣的，這里不多說，看以上代碼就能明白。

來看一下數(shù)組的操作：

//html代碼
 <div v-for="item in arr">
    {{item.index}}
</div>
<button @click="changeArr">更改數(shù)組</button>
<button @click="change">更改數(shù)組</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的效果，當(dāng)然結(jié)果和預(yù)期的一樣：

再來看看change的效果：

我們發(fā)現(xiàn)，change方法并沒有觸發(fā)vue頁面中的重新渲染，而在控制臺(tái)中打印的數(shù)組確實(shí)已經(jīng)變化了，WHY？

由于javascript的限制，vuejs不能檢測(cè)到下面數(shù)組的變化：

直接索引設(shè)置元素，如vm.item[0]={};
修改數(shù)據(jù)的長(zhǎng)度，如vm.item.length。

為了解決問題，Vuejs擴(kuò)展了觀察數(shù)組，為它添加一個(gè)$set()方法：

如何使用，這里不必多說了，給一個(gè)示例

一個(gè)簡(jiǎn)單的數(shù)組位置替換。

再附上一個(gè)vue比較常見的問題的傳送門，寫得很好。
https://segmentfault.com/a/1190000005832164