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

Vue之Watcher源码解析(2)

Vue之Watcher源码解析(2)

接着上节Vue Watcher源码的话,继续探讨,目前是这么个过程:

函数大概是这里:

// line-3846  Vue.prototype._render = function() {    // 获取参数    try {      // 死在这儿      vnode = render.call(vm._renderProxy, vm.$createElement);    } catch (e) {      // 报render错误    }    // return empty vnode in case the render function errored out    if (!(vnode instanceof VNode)) {      // 返回空节点    }    // set parent    vnode.parent = _parentVnode;    return vnode  };

然后,在上个月,我卡死在了render.call这个函数上面,因为所有vue实例被设置了proxy代理,所以会跳转到各种奇怪的检测函数中。

过了一个月,我依然看不懂,一点都不想讲,所以先跳过,直接看后面!

这里假设vnode已经返回了,来看看是个啥:

这是一个虚拟节点,由之前字符串化后的DOM树生成,主要包含子节点、上下文、属性、文本、标签名、类型等属性,这些可以直接从键名判断。

得到vnode后,由于这里是根节点,所以不存在_parentVnode,直接返回。

然后到了mountComponent函数:

// line-2374  function mountComponent(vm, el, hydrating) {    vm.$el = el;    // error    callHook(vm, 'beforeMount');    var updateComponent;    /* istanbul ignore if */    if ("development" !== 'production' && config.performance && mark) {      updateComponent = function() {        // 开发者模式下的处理方式      };    } else {      // 重新进入这里      updateComponent = function() {        vm._update(vm._render(), hydrating);      };    }    vm._watcher = new Watcher(vm, updateComponent, noop);    hydrating = false;    // manually mounted instance, call mounted on self    // mounted is called for render-created child components in its inserted hook    if (vm.$vnode == null) {      vm._isMounted = true;      callHook(vm, 'mounted');    }    return vm  }

这样,就带着返回的vode进入了_update函数,开始正式渲染页面。

函数如下:

// line-2374  Vue.prototype._update = function(vnode, hydrating) {    var vm = this;    if (vm._isMounted) {      callHook(vm, 'beforeUpdate');    }    // 保存原属性    var prevEl = vm.$el;    var prevVnode = vm._vnode;    var prevActiveInstance = activeInstance;    activeInstance = vm;    vm._vnode = vnode;    // patch    if (!prevVnode) {      // 初始化渲染      vm.$el = vm.__patch__(        vm.$el, vnode, hydrating, false /* removeOnly */ ,        vm.$options._parentElm,        vm.$options._refElm      );    } else {      // 更新      vm.$el = vm.__patch__(prevVnode, vnode);    }    activeInstance = prevActiveInstance;    // update __vue__ reference    if (prevEl) {      prevEl.__vue__ = null;    }    if (vm.$el) {      vm.$el.__vue__ = vm;    }    // if parent is an HOC, update its $el as well    // HOC => High Order Component => 高阶组件    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {      vm.$parent.$el = vm.$el;    }    // updated hook is called by the scheduler to ensure that children are    // updated in a parent's updated hook.  };

由于是初次渲染,所以会进入第一个条件分支,并调用__patch__函数,传入原生DOM节点、虚拟DOM、false三个参数。

__patch__在加载框架时候已经注入了,见代码:

  // line-7526  // install platform patch function  Vue$3.prototype.__patch__ = inBrowser ? patch : noop;  // line-6968  var patch = createPatchFunction({    nodeOps: nodeOps,    modules: modules  });

这里,nodeOps为封装的DOM操作操作方法,modules为属性、指令等相关方法。

这个createPatchFunction函数的构造相当于一个模块,里面包含大量的方法,但是最后不是返回一个对象包含内部方法的引用,而是返回一个函数,形式大概如下:

 // line-4762  function createPatchFunction() {    // fn1...    // fn2...    return function patch() {      // 调用内部方法fn1,fn2...    }  }

方法比较多,下次再讲,边跑流程边看。

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

相关文章

Excel表格中制作下拉菜单图文教程

Excel表格中制作下拉菜单图文教程

图文教程,下拉菜单,表格,电脑软件,Excel,Excel下拉菜单怎么做,在办公过程中,可能会用到表格中制作下拉菜单的问题,所以本站就特地带来了四种excel下拉菜单制作方法,让大家能够更轻松的使用excel软件。excel下拉菜单怎么做Excel中制作下拉菜单,通…

入门:InDesign CS6页码设置技巧

入门:InDesign CS6页码设置技巧

设置,页码,入门,技巧,电脑软件,今天为大家分享InDesign CS6页码设置技巧,教程真的很基础,比较适合新手来学习,推荐过来,一起来看看怎么操作吧!1、打开Adobe InDesign CS62、新建文档,设置自己需要的页面,然后点击边距和分栏,设置页边距。3、在右边…

如何删除电脑自带桌面主题

如何删除电脑自带桌面主题

删除,自带,桌面主题,电脑软件,一些主题均采用的是绿色方式(安全,透明),所以如果你想删除主题,需要手动滴,首先打开C:WindowsResources将里面除了以下默认保留文件以外的文件删除,然后打开C:WindowsResourcesThemes将里面除了以下默认保留文件以外…

IIS应用程序池的设置问题解决IIS

IIS应用程序池的设置问题解决IIS

假死,程序池,设置,状态,电脑软件,为应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制,服务器经常产生“应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制。进程 ID 是 '2068'。”的错误,导致iis…

QQ音乐如何显示歌词 QQ音乐歌词如

QQ音乐如何显示歌词 QQ音乐歌词如

音乐,显示,显示歌词,歌词,电脑软件,我们使用QQ音乐听歌的时候喜欢把歌词显示在桌面上,当QQ音乐的版本更新之后很多的功能入口就会发生变化。下面小编就告诉大家qq音乐歌词怎么能显示出来1、打开QQ音乐,我们打开你的喜欢的听得歌,然后点击右下…

mui开发中获取单选按钮、复选框的

mui开发中获取单选按钮、复选框的

单选按钮,复选框,实例,电脑软件,mui,js获取单选按钮的值function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res);}function getRadioRes(className){ var rdsObj = documen…

php结合ajax实现手机发红包的案例

php结合ajax实现手机发红包的案例

案例,发红包,电脑软件,php,ajax,PHP Ajax有许多的功能都会用到它小编今天就有使用PHP Ajax实现的一个抢红包功能,下面我们来看一个PHP Ajax手机发红包的程序例子,具体如下所示。PHP发红包基本流程:当输入完红包数量和总金额后,PHP会根据这两个…

PHP判断一个数组是另一个数组子集

PHP判断一个数组是另一个数组子集

数组,方法,子集,详解,电脑软件,本文实例讲述了PHP判断一个数组是另一个数组子集的方法。分享给大家供大家参考,具体如下:前言今天完成一个算法的过程中,有几个需求模块,其中就有判断$a数组是否是$b数组的子集,可能最近我写c比较多,直接就用for循…

Word文档功能如何画图做出五星红旗

Word文档功能如何画图做出五星红旗

红旗,文档,画图,功能,电脑软件,  Word的画图功能还是很棒的,这里我们就用它来画一面标准的五星红旗。以下是小编为您带来的关于Word画图做出五星红旗,希望对您有所帮助。Word画图做出五星红旗1、单击菜单栏的“插入”→图片&…

tim怎么加好友

tim怎么加好友

好友,电脑软件,tim,tim是腾讯推出的一款通讯团建,和qq互联互通,但画面更简洁好看。那么,tim如何加好友呢?下面小编就来介绍tim怎么加好友。主要就是寻找在tim聊天工具中添加好友的功能在哪里。点击右下角tim图标打开界面,点击如图下所示功能按…

PHPStrom 新建FTP项目以及在线操作

PHPStrom 新建FTP项目以及在线操作

操作,项目,在线,教程,电脑软件,前言PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具。它包含了WebStorm的所有功能,前后端都是相当出色,其强大便利之处,相信用过的同学们都知道。那么这里我就和大家聊聊它的 FTP和远程文件同步 …

word对号怎么打出来 word输入对号

word对号怎么打出来 word输入对号

输入,对号,电脑软件,word,word对号怎么打出来呢?word输入对号是“√ ”这样的,其实很容易打出来,学习完小编给大家分享的两种word对号打出来的方法,打对号“√ ”很轻松。方法一、word中直接插入特殊符号1、打…