其实现在这个还没看懂,只能是初步看一下

_update调用__patch__方法,如果prevVnode(也就是oldVnode),旧vnode和新vnode对比,如果没有,就vnode就是vm.$el,就是挂载的那个真实node

这样进入patch方法之后,先判断oldVnode是否定义了,如果没有,说明这是VueComponent在_init方法中调用到了本方法,这里下面再说。

如果oldVnode定义了,且是真实节点,说明是new Vue 的那个vm在_init方法中调用到了本方法,那么调用createElm方法,创建新节点,递归创建子节点,并用新节点替换掉之前挂载的节点

如果oldVnode定义了,且是虚拟节点,说明是vm(根Vue或者组件)在_update方法中调用了本方法,那么patchVnode,对比(这里还要细看)。

创建新节点:createElm方法,首先判断是不是组件节点,如果不是,比如第一次要挂载的根Vue节点,或者真实节点,先创建node(setScope这里是给stypeScoped生成data-XXXXX?),invokeCreateHooks把属性设置进去

然后创建(递归)子节点,

-----------------------------------

几个疑问:

1、patch中的createElm方法是创建真实节点,如果不是组件节点,在createChildren递归创建子节点之后,if (isDef(data)) {invokeCreateHooks(vnode, insertedVnodeQueue);}这句话的意思?

点进去,cbs是一个数组,大概8个元素,里面的方法主要是来create或者update attr,class,on,style这些节点属性的,如果新节点有而旧节点没有那么就添加,如果新节点没有而旧节点有就删除掉。

再往下,是data.hook的,但是这个hook是在_c方法中一路下来在createComponent方法中,installComponentHooks方法中添加到vnode.data中的,也就是说只有创建组件节点的Vnode的时候data里面才有hook属性。然而当前是

创建真实节点的逻辑,为什么会判断hook呢?

Vue源码之 diff Vnode的更多相关文章

  1. Vue源码终笔-VNode更新与diff算法初探

    写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...

  2. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  3. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  4. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  5. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  6. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  7. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  8. vue源码实现的整体流程解析

    一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...

  9. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

随机推荐

  1. linux配置虚拟机的网络服务

    一.找到网卡位置 二.配置协议 删除网卡物理地址+UUID(方便后期克隆虚拟机,不至于多个虚拟机之间有相同的网卡物理地址,防止出现网络问题)`` cd /etc/sysconfig/network-s ...

  2. java异常处理try catch finally

    1       异常 1.1      异常处理的作用 在编程时,如果出现文件打开失败,读写文件就会异常退出.如果出现内存溢出错误,程序也会异常退出.如果不能对这些异常进行处理.程序则无法正常运行.所 ...

  3. 转发 ----> 2018年阿里巴巴重要开源项目汇总(持续更新中)

    转发自segmentfault  https://segmentfault.com/a/1190000017346799 前端 1.数据驱动的高交互可视化图形语法 AntV - G2 G2 是一套基于 ...

  4. Git笔记整理

    git 分支:   &.创建分支      创建分支很简单:git branch <分支名>       &.切换分支      git checkout <分支名& ...

  5. IP通信实验感想

    经过几周的学习之后,我终于开始了IP通信的实验课. 我们利用H3C进行对ip地址进行设置,在对不同交换机下的pc进行连接测试 首先,我们对交换机和pc机器进行配置设置,ip地址分配分别从192.168 ...

  6. CRM 员工创建并分配用户

    REPORT zjp_emp_upload. TABLES: sscrfields. DATA:gt_excel_data TYPE TABLE OF zalsmex_tabline, gs_exce ...

  7. C语言博客作业02——循环结构

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 本周学习了循环结构,在之前学习分支结构的时候就涉及到了循环结构中的for循环,这周的又新学了while和do- ...

  8. 51. N-Queens N皇后

    网址:https://leetcode.com/problems/n-queens/ 类似见:https://www.cnblogs.com/tornado549/p/10701124.html

  9. rsyslog及loganalyzer

    日志:历史日志 历史事件: 时间记录,事件的关键性程度,loglevel 系统日志服务: syslogd,守护进程 syslogd:system klogd:kernel   rsyslog: sys ...

  10. numpy通用函数

    numpy的通用函数可以对数组进行向量化操作,可以提高数组元素的重复计算的效率. 一.numpy的算数运算符都是对python内置符的封装 算数运算符 >>> import nump ...