Vue：array的变化侦测

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?
你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

由于array不能向对象那样拦截getter和setter对数据进行侦测，但是可以拦截Array.prototype，使用自定义数组api覆盖Array.prototype的api。从而实现对数组变化侦测。

接下来，实现array的拦截器。首先找出能够改变数组自身的数组api，分别为：push、pop、shift、unshift、splice、sort、reverse，然后使用自定义函数覆盖。

先把数组原本的原型缓存起来，然后创建一个继承原本的原型的对象，在该对象上定义与数组api同名的api

const arrayProto = Array.prototype;
const arrMethods = Object.create(arrayProto);
['push','pop','shift','unshift','splice','sort','reverse'].forEach(method => {const originalMethod = arrayProto[method];Object.defineProperty(arrMethods, method, {configurable:true,enumerable:true,writable:true,value:function (...args){return originalMethod.call(this, ...args);}});
});

接下来开始覆盖数组的原型，在原来侦听对象变化的基础上添加对数组数据变化的侦测即可。

class Observer {constructor(value) {this.value = value;if (Array.isArray(value)) {value.__proto__ = arrayMethods;} else {this.walk(value);}}walk(data) {let keys = Object.keys(data);for (let i = 0; i < keys.length; i++) {defineReactive(data, keys[i], data[keys[i]]);}}
}function defineReactive(data, key, val) {if (typeof val === 'object') {new Observer(val);}let dep = new Dep();Object.defineProperty(data, key, {enumerable: true,configurable: true,set(newVal) {if (val === newVal) {return;}val = newVal;dep.notify();},get() {dep.dependSub();return val;}});
}

Vue：array的变化侦测相关推荐

Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
Vue：Array变化侦测
Vue:Array变化侦测 1. 数组追踪变化与Object不同,数组无法通过getter和setter方式来追踪变化,因此,我们需要自定义一个拦截器来追踪变化. 2. 拦截器的准备拦截器 ...
Vue底层原理之变化侦测 —— 让对象每一个属性都变得“可侦测”（一）
Vue底层原理之变化侦测 1. 说在前面 2. 使Object数据"可侦测" 3. 让对象所有属性都变成"可观测" 4.测试及使用 1. 说在前面 1.1 Vu ...
Vue中监测数据变化
Vue中使用keyup <el-form-item label="姓名:" prop="name"><el-inputtype="t ...
《深入浅出vue.js》阅读笔记之数组变化侦测
1.如何追踪变化数组的侦测方式和对象不同,比如: this.list.push(1) 此时并不会像改变对象一样触发setter. 同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们 ...
Vue Array数组操作（变异更新、替换）
今天小编写一下Array数组操作(变异更新.替换) 来个v-for和key小补充,方便了解接下来的课程循环指令v-for补充: 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改 ...
vue 路由参数变化，页面不刷新，provide /inject 完美解决方案
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
vue监控路由变化 vue路由配置
在进行vue的开发中,有时候会出现路由及路由参数拼接乱套的问题,下面我针对我遇到的路由问题进行小小的阐述 vue路由带参数,路由有一个$route对象在使用了 vue-router 的应用中,路由对 ...

Vue：array的变化侦测

Vue：array的变化侦测相关推荐

最新文章

热门文章