一.前置知识点
1.reduce数组方法。
该方法接受一个回调函数和初始值,会循环当前的数组,一般用于数组的循环累加操作,每一次的循环操作依赖上一次的返回值。
回调函数内包含两个参数,第一个是上次循环的结果,第二个是当前循环的项,第一次循环的lastval是传入的初始值。
const arr = [3,5,21,22,55,241,123]
const result = arr.reduce((lastval, item) => { return lastval+item },0)
console.log(result);
//输出结果
470
2.通过reduce方法链式获取对象属性。
在vue中,data里面包含的数据常常是层层嵌套的,我们拿到的一般是其字符串形式:
const obj = {
name:'cloudgaps',
info: {
address:{
location:'changsha'
}
}
}
const attstr = 'info.address.location'
const result = attstr.split('.').reduce((Newobj,key) =>{return Newobj[key]},obj)
console.log(result);
//输出结果
changsha
3.发布订阅模式
1.dep类,负责进行依赖收集。
2.watch类,负责订阅一些事件。
简单的说就是dep类将watch类的订阅(函数方法)进行收集,集中进行存入一个数组,到时候dep再进行订阅发布,触发订阅,此时,watch类会收到通知。
dep里有两个方法,一个是向数组里添加订阅,一个是循环数组内的来触发数组中的每个订阅信息。
简单实现发布订阅模式
class Dep {
constructor(){
// 存放订阅信息
this.subs = []
}
// 添加订阅信息
addSub(watcher){
this.subs.push(watcher)
}
// 发布订阅 触发watcher类身上的update通知
notify(){
this.subs.forEach(item =>
item.update())
}
}
class Watcher {
// 接收一个回调并挂载到自身
constructor(cb){
this.cb = cb
}
// 触发回调 当dep类触发所有实例的update方法时,watch类就会收到通知
// 订阅者本很并不知道什么时候进行数据更新,这就相当于给dep类的联系方式
// dep类可以通过这个方式来通知watch类进行更新
update(){
this.cb()
}
}
const w1 = new Watcher( ()=>{
console.log('我是第1个订阅')
})
const w2 = new Watcher( ()=>{
console.log('我是第2个订阅')
})
// 实例化dep类 收集watcher实例并触发通知
const dep = new Dep()
dep.addSub(w1)
dep.addSub(w2)
dep.notify()
//打印结果
我是第1个订阅
我是第2个订阅
当我们在vue中为data重新赋值时,这个赋值的动作就会被vue监听到,然后vue会把数据的变化通知给每个订阅者(dom元素),接下来订阅者(dom元素)就会根据最新的值来重新渲染页面。CB回调内就是拿到最新数据并更新的具体逻辑。