vue数组响应式原理

vue2中ObjectdefineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理。我们知道，会改变数组本身的方法只有7个：sort, push, pop, slice, splice, shift, unshift,所以可以通过重写这些方法来达到数组响应式

解决方案：

1 找到数组原型

2 覆盖那些能够修改数组的更新方法，让他们在修改数组同时，还可以通知更新

3 将得到的新的原型设置到数组实例原型上

4 对数组内部元素实现响应式

// 实现数组响应式// 1 替换数组原型中7个方法constoriginalProto=Arrayprototype// 克隆体原数组原型constarrayProto=Objectcreate(originalProto)// 可修改数组的7个方法 , 'sort'constchangeMethods=['push','pop','shift','unshift','slice','splice','sort']//  2 在克隆的原型上，覆盖那些能够修改数组的更新方法，让他们在修改数组同时，还可以通知更新changeMethodsforEach(method=>{arrayProto[method]=function(){// 进行原始 *** 作originalProto[method]apply(this,arguments)// 覆盖 *** 作：增加更新通知consolelog(`数组正在执行${method}方法`);}})// 对象响应化functiondefineReactive(obj,key,value){ObjectdefineProperty(obj,key,{get(){consolelog('获取'+key);returnvalue},set(newVal){if(newVal!==value){// consolelog(newVal);// consolelog(JSONstringify(obj[key]));consolelog(`正在改变${key}值:从${obj[key]}变为${newVal}`)value=newVal}}})}functionobserver(obj){// 不是对象或者为null，不做响应式，结束if(typeofobj!=='object'||obj===null)return;// 如果是数组，修改其实例的原型if(ArrayisArray(obj)){// 3 将得到的新的原型设置到数组实例原型上obj__proto__=arrayProto// 4 对数组内的元素，同样进行响应化for(leti=0;i<objlength;i++){// consolelog(obj[i]);observer(obj[i])}// 如果是对象}else{Objectkeys(obj)forEach(key=>{consolelog(obj,key,obj[key]);defineReactive(obj,key,obj[key])})}}obj=[{a:1},2,7,5,3]observer(obj)objpush(4)// 数组正在执行push方法objpop()// 数组正在执行pop方法obj[0]a=2// 获取a    // 正在改变a值:从1变为2objsort()// 数组正在执行sort方法consolelog(obj);// [ 2, 3, 5, 7, { a: [Getter/Setter] } ]consolelog(obj[4]a);// 获取a  // 2

链接：>

以上就是关于vue数组响应式原理全部的内容，包括:vue数组响应式原理、vue中如何取字符串“20%”中的20、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！