当前位置:首页 > 日记 > 正文

Vue之Watcher源码解析(1)

Vue之Watcher源码解析(1)

上一节最后再次调用了mount函数,我发现竟然跳到了7000多行的那个函数,之前我还说因为声明早了被覆盖,看来我错了!

就是这个函数:

// Line-7531  Vue$3.prototype.$mount = function(el, hydrating) {    el = el && inBrowser ? query(el) : undefined;    return mountComponent(this, el, hydrating)  };

第一步query就不用看了,el此时是一个DOM节点,所以直接返回,然后调用了mountComponent函数。

// Line-2375  function mountComponent(vm, el, hydrating) {    vm.$el = el;    /* 检测vm.$options.render */    // 调用钩子函数    callHook(vm, 'beforeMount');    var updateComponent;    /* istanbul ignore if */    if ("development" !== 'production' && config.performance && mark) {      /* 标记vue-perf */    } else {      updateComponent = function() {        vm._update(vm._render(), hydrating);      };    }    // 生成中间件watcher    vm._watcher = new Watcher(vm, updateComponent, noop);    hydrating = false;    // 调用最后一个钩子函数    if (vm.$vnode == null) {      vm._isMounted = true;      callHook(vm, 'mounted');    }    return vm  }

这个函数做了三件事,调用beforeMount钩子函数,生成Watcher对象,接着调用mounted钩子函数。

数据双绑、AST对象处理完后,这里的Watcher对象负责将两者联系到一起,上一张网上的图片:

可以看到,之前以前把所有的组件都过了一遍,目前就剩一个Watcher了。

构造新的Watcher对象传了3个参数,当前vue实例、updateComponent函数、空函数。

// Line-2697  var Watcher = function Watcher(vm, expOrFn, cb, options) {    this.vm = vm;    // 当前Watcher添加到vue实例上    vm._watchers.push(this);    // 参数配置 默认为false    if (options) {      this.deep = !!options.deep;      this.user = !!options.user;      this.lazy = !!options.lazy;      this.sync = !!options.sync;    } else {      this.deep = this.user = this.lazy = this.sync = false;    }    this.cb = cb;    this.id = ++uid$2;    this.active = true;    this.dirty = this.lazy; // for lazy watchers    this.deps = [];    this.newDeps = [];    // 内容不可重复的数组对象    this.depIds = new _Set();    this.newDepIds = new _Set();    // 把函数变成字符串形式`    this.expression = expOrFn.toString();    // parse expression for getter    if (typeof expOrFn === 'function') {      this.getter = expOrFn;    } else {      this.getter = parsePath(expOrFn);      if (!this.getter) {        this.getter = function() {};        "development" !== 'production' && warn(          "Failed watching path: \"" + expOrFn + "\" " +          'Watcher only accepts simple dot-delimited paths. ' +          'For full control, use a function instead.',          vm        );      }    }    // 不是懒加载类型调用get    this.value = this.lazy ?      undefined :      this.get();  };

该构造函数添加了一堆属性,第二个参数由于是函数,直接作为getter属性加到watcher上,将字符串后则作为expression属性。

最后有一个value属性,由于lazy为false,调用原型函数gei进行赋值:

// Line-2746  Watcher.prototype.get = function get() {    pushTarget(this);    var value;    var vm = this.vm;    if (this.user) {      try {        value = this.getter.call(vm, vm);      } catch (e) {        handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));      }    } else {      // 调用之前的updateComponent      value = this.getter.call(vm, vm);    }    // "touch" every property so they are all tracked as    // dependencies for deep watching    if (this.deep) {      traverse(value);    }    popTarget();    this.cleanupDeps();    return value  };  // Line-750  Dep.target = null;  var targetStack = [];  function pushTarget(_target) {    // 默认为null     if (Dep.target) {      targetStack.push(Dep.target);    }    // 依赖目前标记为当前watcher    Dep.target = _target;  }  function popTarget() {    Dep.target = targetStack.pop();  }

原型方法get中,先设置了依赖收集数组Dep的target值,user属性暂时不清楚意思,跳到了else分支,调用了getter函数。而getter就是之前的updateComponent函数:

// Line-2422  updateComponent = function() {    vm._update(vm._render(), hydrating);  };

这个函数不接受参数,所以说传进来的两个vm并没有什么卵用,调用这个函数会接着调用_update函数,这个是挂载到vue原型的方法:

// Line-2422  Vue.prototype._render = function() {    var vm = this;    var ref = vm.$options;    var render = ref.render;    var staticRenderFns = ref.staticRenderFns;    var _parentVnode = ref._parentVnode;    // 检测是否已挂载    if (vm._isMounted) {      // clone slot nodes on re-renders      for (var key in vm.$slots) {        vm.$slots[key] = cloneVNodes(vm.$slots[key]);      }    }    // 都没有    vm.$scopedSlots = (_parentVnode && _parentVnode.data.scopedSlots) || emptyObject;    if (staticRenderFns && !vm._staticTrees) {      vm._staticTrees = [];    }    vm.$vnode = _parentVnode;    // render self    var vnode;    try {      // 调用之前的render字符串函数      vnode = render.call(vm._renderProxy, vm.$createElement);    } catch (e) {      /* handler error */    }    // return empty vnode in case the render function errored out    if (!(vnode instanceof VNode)) {      /* 报错 */      vnode = createEmptyVNode();    }    // set parent    vnode.parent = _parentVnode;    return vnode  };

方法获取了一些vue实例的参数,比较重点的是render函数,调用了之前字符串后的ast对象:

在这里有点不一样的地方,接下来的跳转有点蒙,下节再说。

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

相关文章

学好js,这些js函数概念一定要知道【

学好js,这些js函数概念一定要知道【

推荐,函数,电脑软件,js,函数创建方式 1.声明方式 例如:function consoleTip (){ console.log("tip!"); } 2.表达式方式 例如:var consoleTip = function(){ console.log("tip!"); }两种方式的区别: 1.表达式方式适合用来定义只使用一次的…

详解web存储中的storage

详解web存储中的storage

详解,电脑软件,web,storage,web存储之storage 近期工作中使用的数据存储比较多,在工作之余写一篇关于存储的博客来加深自己的印象,希望大家多多批评指正。一、 web存储分为两种,sessionStorage、localStorage;二、 web存储的特性;1.设置…

H5上传本地并预览功能

H5上传本地并预览功能

上传,功能,电脑软件,最近工作中需要H5上传显示图片的功能,如图:直接上代码:html部分<div class="works-wrap"> <div class="figure-box" id="figure_box"></div> <div class="add-btn"> <input type="file" id="imgUploadBtn"…

Node.js数据库操作之连接MySQL数据

Node.js数据库操作之连接MySQL数据

数据库操作,数据库,连接,电脑软件,Node,介绍首先说来介绍一下MySQL(非广告)。MySQL是由瑞典的MySQL AB公司开发,后来被甲骨文公司收购。和Oracle一样,MySQL是一个典型的关系型数据库,在百度百科中,把MySQL称为是最好的关系数据库管理系统的之一。…

jquery.uploadifive插件怎么解决上

jquery.uploadifive插件怎么解决上

上传,文件大小,插件,电脑软件,jquery,jQuery.uploadifive插件可以很好的解决上传限制图片或文件大小问题,具体方法如下所示:插件是可以用 但遇到问题如何提示是否超过限制呢没办法研究插件js 发现网上给的提示这个插件里竟然没有没有没有.…

excel表格打印缩小放在一张纸的教

excel表格打印缩小放在一张纸的教

缩小,教程,放在,一张纸,表格,  在Excel中录入的数据过多导致一张纸打印不完,但是放到第二张纸又觉得浪费,这个时候就需要我们进行缩小打印,具体该如何设置缩小打印呢?下面是由小编分享的excel表格打印缩小放在一张纸的教程,以供大家阅读和学…

Excel中2010版进行设置顶端标题行

Excel中2010版进行设置顶端标题行

设置,操作技巧,标题,操作步骤,电脑软件,  在excel录入较多的数据时,我们希望每一页都有标题行,这样就可以清楚的知道我们所要表达的意思了。今天,小编就教大家在Excel中2010版进行设置顶端标题行的操作技巧。Excel中2010版进行设置顶端标题…

jQuery实现table中两列CheckBox只

jQuery实现table中两列CheckBox只

示例,电脑软件,table,jQuery,CheckBox,//html<table id="unit"><tr><th>选项一</th><th>选项二</th><th>姓名</th></tr><tr><td><input type="checkbox" /></td><td><input type="checkbox" /></td><td>小红</td></tr><tr><td><input…

微信小程序本作用域下调用全局JS详

微信小程序本作用域下调用全局JS详

作用域,调用,全局,详解,实例,微信小程序本作用域下调用全局JS详解本地wxml文件<view>app版本:{{version}}</view>本地js文件var app;Page({data:{},onLoad:function() {app = getApp();this.setData({version:app.globalData.appName});}})…

ps怎么设计一个加载的动态小图标?

ps怎么设计一个加载的动态小图标?

加载,小图标,动态,电脑软件,ps,在互联网时代,当网络不好时,看到这样的图片,是不是让你万分抓狂。这里教大家用Photoshop软件制作出动态的加载小图标。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、 打…

QQ空间相册批量下载的方法QQ空间相

QQ空间相册批量下载的方法QQ空间相

空间,批量下载,方法,电脑软件,QQ,  QQ空间相册里的照片太多了,一张一张下载比较麻烦,怎么批量下载下来呢?下面小编分享QQ空间相册批量下载的方法,需要的朋友可以参考下.QQ空间相册批量下载的方法1、首先下载一个叫做QQ影像的软件。QQ空间相册…

5种JavaScript脚本加载的方式

5种JavaScript脚本加载的方式

脚本,加载,方式,电脑软件,JavaScript,javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题。当浏览器…