前言
看文檔不認(rèn)真，開發(fā)也沒有多注意判哥，總是hack献雅。忽悠忽悠就過去，但怎么說塌计，歪門邪道還是不太好挺身，現(xiàn)在就亡羊補(bǔ)牢，總結(jié)總結(jié)夺荒。
數(shù)組
索引
- 使用下標(biāo)更新數(shù)組元素瞒渠；
- 使用賦值方式改變數(shù)組長度；
- 使用下標(biāo)增刪數(shù)組元素技扼；
正文
- 使用下標(biāo)更新數(shù)組元素
data: {
arrs: [0, 1, 2, 3]
}
直接使用this.arrs[0] = 'zero';雖然數(shù)組確實(shí)是被更新了伍玖，但是更新不會被渲染到視圖（html頁面）上。因?yàn)閂ue沒有檢測到數(shù)組的更新剿吻。
由于 JavaScript 的限制窍箍，Vue 不能檢測以下變動的數(shù)組：
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(shí)丽旅，例如：vm.items.length = newLength
官方應(yīng)對方法：
- Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
- 使用賦值方式改變數(shù)組長度
即this.arrs.length = 100;無效椰棘！
官方應(yīng)對方法：
- vm.items.splice(newLength)
this.arrs.splice(100);
- 使用下標(biāo)增刪數(shù)組元素
即一下操作無效：
this.arrs[this.arrs.length] = this.arrs.length;
官方應(yīng)對方法：變異方法。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
this.arrs.push(this.arrs.length);
- 替換數(shù)組(改變引用)
如官方所言：filter(), concat() 和 slice()都是會返回一個(gè)新數(shù)組
this.arrs = this.arrs.contact(this.arrs.length);
// or
// this.arrs = this.arrs.contact([this.arrs.length]);
官方對性能問題的回應(yīng)：
你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表榄笙。幸運(yùn)的是邪狞，事實(shí)并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的茅撞、啟發(fā)式的方法帆卓，所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。
對象
索引
- 增刪元素米丘；
正文
data: {
foo: { name: 'isaac' }
}
- 增刪元素
this.foo.job = 'coder';
delete this.foo.name;
如上增刪元素是無效的剑令。
官方的解決方法：
// 新增
Vue.set(this.foo, 'job', 'coder');
// 刪除
Vue.delete(this.foo, 'name');
Vue.delete對數(shù)組也是有效傳送門
