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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值