全国服务热线:4008-888-888

公司新闻

什么微信小程序_Vue响应式原理Observer、Dep、Watc

Vue响应式原理Observer、Dep、Watcher理解       这篇文章主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的。自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果

Object.defineProperty

相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象,会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子

function defineReactive (obj, key, val) {
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: () = {
 console.log('我被读了,我要不要做点什么好 
 return val;
 set: newVal = {
 if (val === newVal) {
 return;
 val = newVal;
 console.log("数据被改变了,我要把新的值渲染到页面上去!");
let data = {
 text: 'hello world',
// 对data上的text属性进行绑定
defineReactive(data, 'text', data.text);
console.log(data.text); // 控制台输出 我被读了,我要不要做点什么好 
data.text = 'hello Vue'; // 控制台输出 hello Vue 数据被改变了,我要把新的值渲染到页面上去! 

Observer 「响应式」

Vue中用Observer类来管理上述响应式化Object.defineProperty的过程。我们可以用如下代码来描述,将this.data也就是我们在Vue代码中定义的data属性全部进行「响应式」绑定。

class Observer {
 constructor() {
 // 响应式绑定数据通过方法
 observe(this.data);
export function observe (data) {
 const keys = Object.keys(data);
 for (let i = 0; i keys.length; i++) {
 // 将data中我们定义的每个属性进行响应式绑定
 defineReactive(obj, keys[i]);

Dep 「依赖管理」

什么是依赖?

相信没有看过源码或者刚接触Dep这个词的同学都会比较懵。那Dep究竟是用来做什么的呢? 我们通过defineReactive方法将data中的数据进行响应式后,虽然可以监听到数据的变化了,那我们怎么处理通知视图就更新呢?

Dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例,我们发现,虽然data中有text和message属性,但是只有message被渲染到页面上,至于text无论怎么变化都影响不到视图的展示,因此我们仅仅对message进行收集即可,可以避免一些无用的工作。

那这个时候message的Dep就收集到了一个依赖,这个依赖就是用来管理data中message变化的。

 div 
 p {{message}} /p 
 /div 

当使用watch属性时,也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化,message变化时我们就要通知到watch这个钩子,让它去执行回调函数。

这个时候message的Dep就收集到了两个依赖,第二个依赖就是用来管理watch中message变化的。

watch: {
 message: function (val, oldVal) {
 console.log('new: %s, old: %s', val, oldVal)
computed: {
 messageT() {
 return this.message + '!';

图示如下:一个属性可能有多个依赖,每个响应式数据都有一个Dep来管理它的依赖。

如何收集依赖

我们如何知道data中的某个属性被使用了,答案就是Object.defineProperty,因为读取某个属性就会触发get方法。可以将代码进行如下改造:

function defineReactive (obj, key, val) {
 let Dep; // 依赖
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: () = {
 console.log('我被读了,我要不要做点什么好 
 // 被读取了,将这个依赖收集起来
 Dep.depend(); // 本次新增
 return val;
 set: newVal = {
 if (val === newVal) {
 return;
 val = newVal;
 // 被改变了,通知依赖去更新
 Dep.notify(); // 本次新增
 console.log("数据被改变了,我要把新的值渲染到页面上去!");

什么是依赖

那所谓的依赖究竟是什么呢?上面的图中已经暴露了答案,就是Watcher。

Watcher 「中介」

Watcher就是类似中介的角色,比如message就有三个中介,当message变化,就通知这三个中介,他们就去执行各自需要做的变化。

Watcher能够控制自己属于哪个,puted,Watcher自己有统一的更新入口,只要你通知它,就会执行对应的更新方法。

因此我们可以推测出,Watcher必须要有的2个方法。一个就是通知变化,另一个就是被收集起来到Dep中去。

class Watcher {
 addDep() {
 // 我这个Watcher要被塞到Dep里去了~~
 update() {
 // Dep通知我更新呢~~

总结

回顾一下,Vue响应式原理的核心就是Observer、Dep、Watcher。

Observer中进行响应式的绑定,在数据被读的时候,触发get方法,执行Dep来收集依赖,也就是收集Watcher。

在数据被改的时候,触发set方法,通过对应的所有依赖(Watcher),puted就执行开发者自定义的回调方法。

本篇文章属于入门篇,能够先简单的理解Observer、Dep、Watcher三者的作用和关系。后面会逐渐详细和深入,循序渐进的理解和学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服