vue 陣列 新增元素 響應式原理 7種方法

2021-09-07 20:32:35 字數 1560 閱讀 8527

1、問題

思考乙個問題，以下**：

引申出的問題就是：

vue對陣列新增的元素，包括push、unshift和splice（插入）的元素是怎麼做到響應式的呢？

2、vue對新增的陣列元素響應式原理

（1）核心**（observer/array.js）

/*


* not type checking this file because flow doesn't play well with


* dynamically accessing methods on array prototype */


import  from '../util/index'const arrayproto =array.prototype


export const arraymethods =object.create(arrayproto)


const methodstopatch =[


'push',


'pop',


'shift',


'unshift',


'splice',


'sort',


'reverse']/**


* intercept mutating methods and emit events */


methodstopatch.foreach(


function


(method) 


if(inserted) ob.observearray(inserted)


//notify changeob.dep.notify()


return


result


})})
在這個函式中使用到了def函式，def函式的定義是（util/lang.js）：

export function def (obj: object, key: string, val: any, enumerable?: boolean


) )}
即對元素的屬性重新定義，尤其是value的獲取。

回到observer/array.js，除了正常返回push、unshift和splice（插入）函式執行的result結果外，還通知了變化！ob.dep.notify！ 所以對新增的陣列元素實現了響應式的變化。

留乙個問題：

switch


(method)
為什麼push、unshift和splice處理的引數不一樣？ 

查一下splice的引數有哪些吧。

vue 陣列 新增元素 響應式原理

1 問題 思考乙個問題，以下 引申出的問題就是 vue對陣列新增的元素，包括push unshift和splice 插入 的元素是怎麼做到響應式的呢？2 vue對新增的陣列元素響應式原理 1 核心 observer array.js not type checking this file becau...

jquery 陣列 新增元素

在前提不知道b在這個陣列的下標，刪除b這個元素 var arrlist a b c d arrlist.splice jquery.inarray b arrlist 1 alert arrlist 其中jquery.inarray b arrlist 是b這個元素在陣列arrlist 中的位置 s...

jquery 陣列 新增元素

在前提不知道b在這個陣列的下標，刪除b這個元素 var arrlist a b c d arrlist.splice jquery.inarray b arrlist 1 alert arrlist 其中jquery.inarray b arrlist 是b這個元素在陣列arrlist 中的位置 s...