.12-Vue源码之patch（2）
2024-04-03 12:37:28
快完事咯！
简单看了下patch函数，虽然不长，但是实际上很长很长，慢慢来吧，
首先来个总览：
// line-5250
// oldVnode => 原生DOM节点
// vnode => 虚拟DOM
// hydrating => undefined
// removeOnly => false
// 后面两个undefined
function patch(oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
// 判断是否存在虚拟DOM
if (isUndef(vnode)) {
if (isDef(oldVnode)) {
invokeDestroyHook(oldVnode);
}
return
} var isInitialPatch = false;
var insertedVnodeQueue = []; if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
// 空挂载或作为组件
isInitialPatch = true;
createElm(vnode, insertedVnodeQueue, parentElm, refElm);
} else {
var isRealElement = isDef(oldVnode.nodeType);
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);
} else {
if (isRealElement) {
// 判断是否SSR
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
hydrating = true;
}
// hydrating这个到底是啥？？？？
if (isTrue(hydrating)) {
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
invokeInsertHook(vnode, insertedVnodeQueue, true);
return oldVnode
} else {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. This is likely caused by incorrect ' +
'HTML markup, for example nesting block-level elements inside ' +
'<p>, or missing <tbody>. Bailing hydration and performing ' +
'full client-side render.'
);
}
}
// 两个都不是 新建空虚拟DOM
oldVnode = emptyNodeAt(oldVnode);
}
// 此处oldElm => div | parentElm$1 => body
var oldElm = oldVnode.elm;
var parentElm$1 = nodeOps.parentNode(oldElm);
createElm(
vnode,
insertedVnodeQueue,
// BUG：当节点处于leaving transition状态中不插入
oldElm._leaveCb ? null : parentElm$1,
// 获取相邻节点
nodeOps.nextSibling(oldElm)
); if (isDef(vnode.parent)) {
// component root element replaced.
// update parent placeholder node element, recursively
var ancestor = vnode.parent;
while (ancestor) {
ancestor.elm = vnode.elm;
ancestor = ancestor.parent;
}
if (isPatchable(vnode)) {
for (var i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, vnode.parent);
}
}
} if (isDef(parentElm$1)) {
removeVnodes(parentElm$1, [oldVnode], 0, 0);
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode);
}
}
} invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
return vnode.elm
}
函数总共有6个形参，其中有3个为undefined，内部总共主要是条件判断，按照顺序跑下来。
一、
由于不是SSR，也没有hydrating这个参数，所以会直接创建一个空的虚拟DOM作为oldVnode，如下：
// line-4778
function emptyNodeAt(elm) {
return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}
二、
接下来到了createElm方法，代码如下：
// line-4802
// vnode => 之前的虚拟DOM
// insertedVnodeQueue => [] => 空数组
// parentElm => body => 父元素
// refElm => 空白文本 => 节点的相邻元素
// nested => undefined
function createElm(vnode, insertedVnodeQueue, parentElm, refElm, nested) {
vnode.isRootInsert = !nested; // for transition enter check
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
} var data = vnode.data;
var children = vnode.children;
var tag = vnode.tag;
if (isDef(tag)) {
// error检测
{
if (data && data.pre) {
inPre++;
}
// 这个错误经常见！
if (!inPre &&
!vnode.ns &&
!(config.ignoredElements.length && config.ignoredElements.indexOf(tag) > -1) &&
config.isUnknownElement(tag)
) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
);
}
}
// ns???
vnode.elm = vnode.ns ?
nodeOps.createElementNS(vnode.ns, tag) :
nodeOps.createElement(tag, vnode);
setScope(vnode); /* istanbul ignore if */
{
createChildren(vnode, children, insertedVnodeQueue);
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue);
}
insert(parentElm, vnode.elm, refElm);
} if ("development" !== 'production' && data && data.pre) {
inPre--;
}
}
// 注释
else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text);
insert(parentElm, vnode.elm, refElm);
}
// 处理纯文本
else {
vnode.elm = nodeOps.createTextNode(vnode.text);
insert(parentElm, vnode.elm, refElm);
}
}
函数进入就会调用createComponent进行判断，这个函数暂时看不太懂，一个分支都没有进，直接返回了undefined：
// line-4855
function createComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
// 获取属性
var i = vnode.data;
if (isDef(i)) {
var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */ , parentElm, refElm);
}
// after calling the init hook, if the vnode is a child component
// it should've created a child instance and mounted it. the child
// component also has set the placeholder vnode's elm.
// in that case we can just return the element and be done.
if (isDef(vnode.componentInstance)) {
initComponent(vnode, insertedVnodeQueue);
if (isTrue(isReactivated)) {
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
}
return true
}
}
}
下一步是跳到createElement函数，nodeOps中的方法都是自封装的DOM操作方法，超级简单。
// line-4599
function createElement$1(tagName, vnode) {
var elm = document.createElement(tagName);
if (tagName !== 'select') {
return elm
}
// 对select做特殊处理
// false or null will remove the attribute but undefined will not
if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
elm.setAttribute('multiple', 'multiple');
}
return elm
}
可以看，这个方法也就是创建一个DOM节点并返回，对select会做特殊处理，于是vnode.elm也就是个普通的DOM节点。
接下来是setScope函数(),该函数目的是给根节点添加一个特殊的ID，避免css样式影响其他模块。
这个东西我就熟悉啦，触发形式是这样：
渲染结果是这样：
这样可以保证所有的样式都是独立的，就算名字一样，后面添加的随机字符串可以保证唯一。
// line-4958
function setScope(vnode) {
var i;
var ancestor = vnode;
while (ancestor) {
if (isDef(i = ancestor.context) && isDef(i = i.$options._scopeId)) {
nodeOps.setAttribute(vnode.elm, i, '');
}
ancestor = ancestor.parent;
}
// for slot content they should also get the scopeId from the host instance.
if (isDef(i = activeInstance) &&
i !== vnode.context &&
isDef(i = i.$options._scopeId)) {
nodeOps.setAttribute(vnode.elm, i, '');
}
}
函数判断虚拟DOM是否存在_scopeId，然后对每一个节点添加对应的Id，这里没有，所以就会跳过去。
接下来调用createChildren方法，从名字也能看出来是对子节点的处理。实际上，也是对子节点或者纯文本进行递归处理：
// line-4927
function createChildren(vnode, children, insertedVnodeQueue) {
// 存在复杂子节点
if (Array.isArray(children)) {
for (var i = 0; i < children.length; ++i) {
createElm(children[i], insertedVnodeQueue, vnode.elm, null, true);
}
}
// 子节点为纯文本
else if (isPrimitive(vnode.text)) {
nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(vnode.text));
}
}
第一条分支处理DOM子节点，直接递归。本例子节点只是一个纯文本：
因此，重新跳入createElm方法后，会直接进入第三个分支，即：
// line-4802
function createElm(vnode, insertedVnodeQueue, parentElm, refElm, nested) {
// 属性获取
// ...
if (isDef(tag)) {
// 处理节点类型
} else if (isTrue(vnode.isComment)) {
// 处理注释
} else {
vnode.elm = nodeOps.createTextNode(vnode.text);
insert(parentElm, vnode.elm, refElm);
}
}
这个分支只有两条语句，第一条会创建一个文本节点给elm属性，第二条负责插入。
第一个DOM操作只是简单调用document.createTextNode方法，直接看第二个函数吧：
// line-4915
// parent => div => 父节点
// elm => #text => 本节点
// ref => null => 相邻节点
function insert(parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (ref.parentNode === parent) {
//
nodeOps.insertBefore(parent, elm, ref);
}
}
// parent.appendChild(elm)
else {
nodeOps.appendChild(parent, elm);
}
}
}
第二个也是DOM操作！好吧，比较简单，看看就懂了。
子节点处理完后，接下来处理本节点的属性，相关函数为invokeCreateHooks：
// line-4944
// vnode => 虚拟DOM
// insertedVnodeQueue => []
function invokeCreateHooks(vnode, insertedVnodeQueue) {
// cbs为工具对象
for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) {
cbs.create[i$1](emptyNode, vnode);
}
i = vnode.data.hook; // Reuse variable
if (isDef(i)) {
if (isDef(i.create)) {
i.create(emptyNode, vnode);
}
if (isDef(i.insert)) {
insertedVnodeQueue.push(vnode);
}
}
}
比较重要的是这里的cbs对象，在外部函数运行最开始有进行初始化，如下：
// line-4762
function createPatchFunction(backend) {
var i, j;
var cbs = {};
// line-6968
// var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });
var modules = backend.modules;
var nodeOps = backend.nodeOps; for (i = 0; i < hooks.length; ++i) {
cbs[hooks[i]] = [];
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
cbs[hooks[i]].push(modules[j][hooks[i]]);
}
}
} // tools fn // return fn
}
这个对象来源于多个对象的拼接，包含大量虚拟DOM的操作方法，内容如图：
从名字可见，该对象整合了创建、摧毁、移除、更新等功能库，此处仅用create来创建，内部函数如图：
invokeCreateHooks函数一开始遍会遍历此数组，依次传参执行，参数为空vnode与当前的vnode。
这部分比较长，下次再讲。
最新文章
- “(null)” is of a model that is not supported by this version of Xcode. Please use a different device.
- Arduino下LCD1602综合探究（下）——如何减少1602的连线，LiquidCrystal库，LiquidCrystal库中bug的解决方法
- css3的动画特性
- @Transient注解----Hiberbate
- 这台计算机上缺少此项目引用的 NuGet 程序包-缺少的文件是 ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props
- PHP基础班初学感悟
- 根据ip获取用户地理位置
- MySQL服务器权限表
- win8程序开机自启动管理
- Android Studio SDK Manager无法正常下载如何设置
- 利用Keil u4调试，精确实现软件延时
- spring mvc框架 遇到的问题
- iOS 编程之 使用 Xcode6配置.pch文件
- php简单的文件操作
- linux 配置Apache 、PHP
- python入门（4）第一个python程序
- redis知识点汇总
- JavaScript -- 时光流逝（二）：js中数组的方法
- ASP.NET MVC 3 Razor 语法
- 【转】wampserver2.5 apache2.4.9配置https 图文