用習(xí)慣angular.js之后佩研，大多數(shù)開發(fā)者再學(xué)習(xí)vue的話柑肴，其實(shí)總體來說，是比較好上手的旬薯，但是歸于一些細(xì)節(jié)晰骑，還是有不同的，比如數(shù)據(jù)的雙向綁定绊序。
先來看一下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>
還好硕舆，這個(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頁面中的重新渲染凌节，而在控制臺中打印的數(shù)組確實(shí)已經(jīng)變化了钦听，WHY？
由于javascript的限制倍奢，vuejs不能檢測到下面數(shù)組的變化：
直接索引設(shè)置元素朴上，如vm.item[0]={};
修改數(shù)據(jù)的長度，如vm.item.length娱挨。
為了解決問題余指，Vuejs擴(kuò)展了觀察數(shù)組，為它添加一個(gè)$set()方法：
如何使用跷坝，這里不必多說了酵镜，給一個(gè)示例
一個(gè)簡單的數(shù)組位置替換。
再附上一個(gè)vue比較常見的問題的傳送門柴钻，寫得很好淮韭。
https://segmentfault.com/a/1190000005832164
