vue中不能檢測(cè)到數(shù)組和對(duì)象的兩種變化:
1.數(shù)組長(zhǎng)度的變化 vm.arr.length = 4
2,數(shù)組通過(guò)索引值修改內(nèi)容 vm.arr[1] = 'aa'
Vue.$set(target,key,value)可以動(dòng)態(tài)的給數(shù)組局齿、對(duì)象添加修改數(shù)據(jù),并更新視圖中數(shù)據(jù)的顯示撞反。
vue在構(gòu)造函數(shù)new Vue()時(shí)算吩,就通過(guò)Object.defineProperty中的getter和setter 這兩個(gè)方法瘸洛,完成了對(duì)數(shù)據(jù)的綁定守伸。所以直接通過(guò)vm.arr[1] = 'aa'的方法斤吐,無(wú)法修改值觸發(fā)vue中視圖的更新站粟,必須還得通過(guò)Object.defineProperty的方法去改變黍图,而Vue.$set()就封裝了js底層的Object.defineProperty方法。
Vue.set數(shù)組實(shí)現(xiàn)雙向綁定的原理:其實(shí)Vue.set()對(duì)于數(shù)組的處理其實(shí)就是調(diào)用了splice方法奴烙。splice是vue中的變異數(shù)組方法助被,添加了get和set后會(huì)引起視圖響應(yīng)。
變異數(shù)組:?https://blog.csdn.net/qq_34865249/article/details/94893352
if (Array.isArray(target) && isValidArrayIndex(key)) {
??target.length = Math.max(target.length, key)
??target.splice(key, 1, val)
??return val
?}