阅完此文,Vue响应式不再话下

vue的双向数据绑定,众所周知是基于Object.defineProperty这个在浏览器的特性api来实现的。但是怎么从视图到数据,数据到视图,这个整个大过程,对于很多盆友来说,还有点不是很清楚。

这篇文章,将会特别轻松的换个角度让你明白整个过程。just do it !!! :dancer::dancer::dancer:

Vue的响应式系统

我们第一次使用Vue的时候,会感觉有些神奇,举个例子:

<div id="app">
  <div>价格:¥{{price}}</div>
  <div>总价:¥{{price*quantity}}</div>
  <div>折扣后:¥{{totlePriceWithTax}}</div>
</div>
<script>
	var vm=new Vue({
    el:'#app',
		data:(){
    	price:5.00,//单价
    	quantity:2//数量
  	},
    computed:{
       totlePriceWithTax(){
    			return this.price*this.quantity*1.03
  			}
    }
  })
</script>

我们使用vue的时候,不知道它内部做了什么。它都能知道price这个字段的值是否发生过变化,如果发生了变化,他会做如下几件事:

  • 更新页面显示的price的值

  • 重新计算总价的乘法表达式并且更新显示结果

  • 重新调用totlePriceWithTax函数,并且更新显示

这儿,咱们就有一个疑问,vue怎么就知道price变化了之后,都要更新哪些值呢?为什么,每次一变化,就要更新呢?如何跟踪的呢?

JavaScript正常的运行方式

我们把这个例子整理成我们正常的JavaScript程序来看看:

let price=5;
let quantity=2;
let total=price*quantity;//计算总价
pice=20;//price字段发生变更之后
console.log(`变化之后的总价:${total}`);

这个会输出打印多少呢?因为我这儿没有使用Vue,很明显,这儿会输出10:

>> 变化之后的总价:10

在咱们经常使用的Vue中,我们想要在price或者quantity这两个字段更新时,和它有关的表达式也会更新,和它有关的函数也会执行。

>> 变化之后的总价:40

但是,javascript是过程性的,不是响应式的,所以这个代码在实际运行的时候是不行的。为了让total在price更新的时候,它也跟着更新,我们必须让JavaScript语言具备不同的运行方式。

问题

那么我们现在就遇到了一个问题,怎么样,才能在price字段或者quantity更新的时候,total也重新更新显示呢?

尝试一下

首先,我们需要明白price和totle的关联是:

let total=price*quantity;

那么,在price更新之后,需要重新得到新的total,就需要重新执行这个方法。那么就需要有一个地方把这个 方法储存起来 ,在price变更的时候,重新运行储存起来的方法,这样total值就更新了。

那我们就来尝试一下,把函数记录下来,后面变更的时候,再次运行。

let price=5;
let quantity=2;
let total=0;
let target=null;

//记录函数
target=()=>{
  total=price*quantity;
}
record();//后面讲解,记住这个我们后面想要运行的函数
target();//同时,我们执行一遍这个方法

record记录函数的实现就很简单了:

let storage=[];//这是要记录函数的地方,就是上面图中椭圆的那个东西


//记录方法的实现,这个时候的target就是我们要记录的方法
function record(){
  storage.push(target)
}

这一步,将target储存了起来,这样我们后面就可以运行它。这个时候,我们就需要一个运行所有记录的内容的函数。那我们就来搞一哈:

function replay(){
  storage.forEach((run)=>{
    run();
  })
}

这儿,我们遍历了所有记录的内容,并且每一个都执行。

这个时候,我们的代码就可以更改一下:

let price=5;
let quantity=2;
let total=0;
let target=null;

function record(){
  storage.push(target)
}

function replay(){
  storage.forEach((run)=>{
    run();
  })
}

target=()=>{
  total=price*quantity;
}
record();
target();

console.log(total)// 10
price=20;
replay();
console.log(total)//40

这样我们就实现了,一个记录的过程,但是这样没有一个很好地管理,我们能不能把记录这块的内容,维护成一个类,让这个类维护一个tagert列表,每次需要重新运行的时候,这个类都会得到通知。

年轻人,火力旺,说干就干。 维护一个单独的Dep类,代码如下:

class Dep{
  constructor(){
    this.subscribers=[];//维护所有target的列表,在得到通知的时候,全部都会运行
  }
  depend(){
    if(target&&!this.subscribers.includes(target)){
       //只有target有方法,并且没有被记录过
      this.subscribers.push(target);
    }
  }
  notify(){
    this.subscribers.forEach((sub)=>{
      sub();
    })
  }
}

在这个类中,我们不再使用storage,使用subscribers这个字符来记录target函数的内容,也不再使用record,使用depend,也用了notify替代了replay,这个时候要运行,就只需要:

const dep=new Dep();

let price=5;
let quantity=2;
let total=0;
let target=null;

target=()=>{
  total=price*quantity;
}
dep.depend();//记录到subscribers中
target();

console.log(total)// 10
price=20;
dep.notify();//遍历执行所有target,分发内容
console.log(total)//40

这样,整体的过程就会好一点,但是还是会显得很冗余,如果能过把匿名函数创建,观察,更新的这些行为封装起来,那就更好了。

年轻人,总是冲动,咱们说干就干。 把原来的创建和记录:

target=()=>{
  total=price*quantity;
}
dep.depend();//记录到subscribers中
target();

这块内容封装起来,咱们给封装起来的函数起名叫做watcher,封装起来之后,我们就只需要这样调用:

watcher(()=>{
  total=price*quantity
})

那我们在实现watcher的时候,这么做就好:

function watcher(myFunc){
  target=myFunc;//传入的函数赋值
  dep.depend();//收集
  target();//执行一下
  target=null;//重置
}

这儿,咱们看到watcher函数接受了一个变量myFunc,这个myFunc后面接收的是匿名函数,然后赋值给target属性,调用dep.depend(),将以订阅者的形式添加target到记录的地方,然后调用target,并且重置。

现在结合上面的代码咱们尝试一下这个代码:

price=20;
console.log(total);
dep.notify();
console.log(total);

这里面有一个问题,就是target为什么要设置成全局变量,而不是将其传递给需要的函数。咱们后面会细聊。

现在我们有一个Dep类了,但是我们整整想要实现的情况是,每一个变量都有响应的地方记录它关联的变更,每个变量都有自己的Dep。这个可咋整?

年轻人,不怕事,说干就干。 咱们首先把所有的变量放到一起:

let data={
  price:5,
  quantity:2
}

现在我们假设每一个属性(price和quantity)都有自己内部的Dep类。

当我们运行watcher这个函数的时候:

wacther(()=>{
  total=data.price*data.quantity
})

因为我们是使用到了data.price的值,那么我们希望price属性的Dep类可以将使用它的匿名函数(储存在target上)放在订阅数组中,记录下来(通过调用dep.depend())。同时data.quantity这个变量也被访问了,所以也希望能够被记录下来,放在对应的订阅数组中:

如果这个时候还有其他的地方也在使用data.price,我们也希望可以把对应的匿名函数放到Dep类中记录下来。

那么,什么时候会调用price对应的Dep中的notify呢?在price赋值,值发生改变的时候。我们最后希望发生的效果是:

>> total
10
>> price=20
>> total
40

我们希望,当数据被访问的时候,能够把对应的target匿名函数储存到订阅数组中,当属性变更的时候,能够运行对应的储存在订阅数组中的匿名函数。

解决方案

这个一眼看过去,访问时,改变时。脑海中直接就出来了Object.defineProperty,这个允许我们为属性定义getter和setter函数。在展示如何和Dep结合的之前,先看下用法:

let data={price:5,quantity:2};
Object.defineProperty(data,'price',{
  get(){
    console.log('被访问')
  },
  set(newVal){
    console.log('被修改')
  }
});
data.price;//输出:被访问
data.price=20;//输出:被修改

里,我们并没有实际的修改get和set的值,因为功能被覆盖了。现在,我们希望get的时候能够返回一个值,set的时候能够更新值。所以我们先添加一个变量internalValue来储存当前的price的值。

let data={price:5,quantity:2};

let internalValue=data.price;//初始值

Object.defineProperty(data,'price',{
  get(){
    console.log('被访问');
    return internalValue
  },
  set(newVal){
    console.log('被修改');
    internalValue=newVal
  }
});
total=data.price*data.quantity;//调用get
data.price=20;//调用set

这样我们就可以把所有我们想要的监听的数据,全部给处理一下:

let data={price:5,quantity:2};

Object.keys(data).forEach((key)=>{
  let internalValue=data[key];//初始值

  Object.defineProperty(data,key,{
    get(){
      console.log('被访问');
      return internalValue
    },
    set(newVal){
      console.log('被修改');
      internalValue=newVal
    }
  });
})

total=data.price*data.quantity;//调用get
data.price=20;//调用set

这样所有的数据都变了可监听的了。

把他们结合起来

total=data.price*data.quantity

当这个代码运行的时候,会触发price属性对应的get方法,我们希望price的Dep可以记住这个对应的匿名函数(target)。通过这个方式,如果发生改变,触发了set,那么就能够调用这个属性对应的储存起来的匿名函数。

  • Get —记住匿名函数,当值发生变化的时候重新运行。

  • Set —运行保存的匿名函数,对应匿名函数绑定的值就会发生变化

切换到Dep class的模式:

  • price被访问时—调用dep.depend保存当前target

  • price被改变时—调用price的dep.notify,重新运行所有的target

最后,我们就把这个结合起来,年轻人,不要磨磨蹭蹭,突突两下就可以了:

let data={price:5,quantity:2};
let target=null;


class Dep{
  constructor(){
    this.subscribers=[];//维护所有target的列表,在得到通知的时候,全部都会运行
  }
  depend(){
    if(target&&!this.subscribers.includes(target)){
       //只有target有方法,并且没有被记录过
      this.subscribers.push(target);
    }
  }
  notify(){
    this.subscribers.forEach((sub)=>{
      sub();
    })
  }
}


Object.keys(data).forEach((key)=>{
  let internalValue=data[key];//初始值

  Object.defineProperty(data,key,{
    get(){
      console.log('被访问');
      dep.depend();//添加对应的匿名函数target
      return internalValue
    },
    set(newVal){
      console.log('被修改');
      internalValue=newVal;
      dep.notify();//触发对应的储存的函数
    }
  });
})

function watcher(myFunc){
  target=myFunc;//传入的函数赋值
  target();//执行一下
  target=null;//重置
}
watcher(()=>{
  data.total=data.price*data.quantity;
})

这就结合了这一块的东西,price和quantity两个属性变成了响应式的情况,可以下来试一下。

直接上架构图:

最后,Vue2中还有很多东西,Vue3也出来了,我们这块出了对应的课程。 年轻人不要犹犹豫豫。 机会和成长总在犹豫的时候就溜走了。

在这样一个信息爆炸、知识唾手可得的时代 ,年轻人一定要做个明白人,懂得筛选和判断优质内容。

你可能经常会领取到海量前端资料包,收藏起来就再也没看过。

但今天,我们想给你点真正有品质的内容—— 你不知道的Vue.js 性能优化】

  • 本次专题课深度讲解 Vue.js 性能优化,以及 Vue3.0 那些值得关注的新特性。在高级前端岗位面试中,性能优化是一个必问的知识点,本课程通过对 Vue 面试核心知识点的拆解,带你解锁你可能不知道的 Vue.js 性能优化,直达大厂offer!

它将带你学到什么?

1.Vue首屏优化实践

  • 大厂面试问Vue项目优化时的各种讲解

  • 核心工程化知识点讲解

  • 不同的核心优化方案剖析

  • 常考Vue知识点串讲

2.面试常问的Vue双向数据深度解析

  • 修正对于Object.defineProperty的错误理解

  • Vue2中双向数据绑定为什么性能不好?

  • 数组的双向数据绑定怎么处理的

3.深度对比 Vue2 & 3,助你直达offer

  • 浅尝Vue3的使用

  • Vue3的新特性解析

  • Vue3核心双向数据绑定的实现解析

  • 深度对比Vue2,助你直达offer

扫描下图二维码,原价98元的优质好课  限时1元

:rainbow:  彩蛋 :rainbow:

购课之后,还将赠送价值196元的【 Webpack 从入门到精通 】全系列教程。

以下是赠送的详细内容

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章