vue双向数据绑定原理1--前置知识点reduce、发布订阅模式

一.前置知识点

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回调内就是拿到最新数据并更新的具体逻辑。