中文pdf高清版[186MB] Vue.js名目开发实战 由张帆撰写 (中文书pdf网站)

本文目录导航：

• Vue.js名目开发实战（由张帆撰写）中文pdf高清版[186MB]
• 手动成功Vue3&原了解析(三)——renderer渲染器&&render渲染&&patch对比更新
• 改头换面的 Vue3 中文文档来了！

Vue.js名目开发实战（由张帆撰写）中文pdf高清版[186MB]

“名目开发实战”是一本以Javascript言语为基础，聚焦名目开发全环节的技术指南。

它片面展现了从NoSQL数据库搭建、Express名目API编写，到在首页展现的完整技术链条，旨在极速优化读者的名目开发技艺。

本书由四局部组成。

第一局部是基础环境构建，为全书打下松软基础。

第二局部深化讨论电影网站名目标实战运行，涵盖ES6、Webpack和工程环境等关键前端技术。

第三局部详细解析电影网站的前端和后端成功，触及后端技术、组件与API运行。

第四局部着重页面优化，经过学习模板和框架技巧，以构建更好看的用户界面。

本书面向初学者、初级开发者、Web前端与后端开发者，同时适宜产品经理。

它也是培训机构和提供Web开发课程的学校低劣的名目开发教程。

本书蕴含从Web开发初步钻研到电影网站名目标片面设计，再到运行开发的深度解析，直至页面优化的精彩章节，以及附录内容。

经过阅读本书，读者能系统把握名目开发的全环节，优化实战才干。

手动成功Vue3&原了解析(三)——renderer渲染器&&render渲染&&patch对比更新

前言

本篇解析参阅vue3源码、崔大的mini-vue、霍春阳大佬的《Vuejs设计与成功》尽或许记载我的Vue3源码阅读学习环节。

我会联合自己的思索，提出疑问，找到答案，附在每一篇的底部。

宿愿大家能在我的文章中也能一同窗习，一同提高，有get到物品的可以给作者一个小小的赞作为激励吗？谢谢大家！

手写繁难vue3renderer渲染器&&render渲染&&patch对比更新

以render和renderer的差异先开个头吧

很多人会把这两者混杂，咱们也顺便将这一节会讲到的一些名词来做一个提早申明

render：渲染是一个动词，渲染什么。

renderer：渲染器是一个名词，它的作用就是把虚构DOM渲染为特定平台的实在元素（在阅读器上就是渲染为实在DOM元素）。

virtualDOM：虚构DOM，简写成vdom，由一个个节点(vnode)组成的树型结构。

virtualnode：虚构节点，简写成vnode，组成树型结构的基本单位，留意恣意一个vnode都可以是一棵子树。

mount：挂载，渲染器把虚构DOM节点渲染成实在DOM节点的环节就叫做挂载，Vue中也提供了一个mounted钩子在这个挂载成功时触发，可以让咱们拿到实在的DOM节点。

container：容器，渲染器挂载须要提供一个容器给它，这样它才知道挂载在哪个位置，咱们会提供一个DOM元历来作为这个容器。

patch：比拟更新，调用render函数时，假设曾经有旧的节点(oldvnode)了，那就须要走patch来做比拟，找到并更新变卦的位置，是渲染逻辑关键入口。

patch除了比拟更新也能用来口头挂载(初次渲染，没有oldvnode)。

咱们经过代码来形容一下他们的一个大抵相关：

function?createRenderer()?{??function?render(vnode,?container)?{????if?(vnode)?{??????//?新的?vnode?存在，和旧的?vnode?一同传递给?patch函数启动更新??????patch(container._vnode,?vnode,?container)????}?else?{??????//?...????}????//?新的?vnode?赋值给?container?的?_vnode?属性????container._vnode?=?vnode??}??return?render}

上述的代码就是用createRenderer函数来创立一个渲染器，调用这个函数就会失掉一个render函数，render函数以container作为挂载点，将vnode渲染为实在DOM并减少到挂载点下触发mounted，render函数的外部有一个patch函数，它能比拟更新新老节点，找到变卦位置并更新，也能成功初次的挂载。

你或许会纳闷为啥要多一个createRenderer来包装一层呢我干嘛不间接定义render函数呢？

那就带着不懂接着往下看吧

renderer渲染器

实践上renderer的作用不只仅是前往一个render函数这么便捷，它还蕴含了一些patch(比拟新旧节点，并更新)、hydrate(服务端渲染用到的)性能

在Vue3中，createRenderer函数最终除了前往上边提到的render以及hydrate以外，还会前往一个叫createAPP的函数

return?{??render,??hydrate,??createApp:?createAppAPI(render,?hydrate)}

实践上咱们看到这个createApp实践上是一个createAppAPI的物品，必定传入render，里边实践上就是包装了一层函数叫做mount，它创立一个vnode节点来调用这个render函数成功挂载。

hydrate是可选的咱们这就不说它了，后边假设有服务端渲染篇的话咱们再好好聊这个。

接着呢，咱们再强调一下renderer渲染器的作用是把虚构DOM渲染为特定平台的实在元素，也就是说他是允许共性化性能才干来成功跨平台的。

在代码里，createRenderer是接纳一个options参数的，而后它运用解构来拿到对应的操作

export?function?createRenderer(options)?{??const?{????//?创立?element????createElement:?hostCreateElement,????//?对比元素新老属性????patchProp:?hostPatchProp,????//?拔出?element????insert:?hostInsert,????//?删除?element????remove:?hostRemove,????//?设置?text????setElementText:?hostSetElementText??}?=?options}

createRenderer实践上就是蕴含了诸多的解决函数，详细的咱们看一下以下图片

render函数

render函数在最后的时刻咱们也看到了其实它就是调用patch，由patch来依据能否是初次渲染来判别间接挂载到实在DOM或是对比新旧节点找到变卦点成功更新。

另外render函数还担任了当传入的vnode是空且以后的挂载点存在vnode的时刻，象征着须要口头卸载操作

便捷的，咱们可以以为render函数的成功如下：

function?render(vnode,?container)?{??if?(vnode)?{????//?新的?vnode?存在，和旧的?vnode?一同传递给?patch函数启动更新????patch(container._vnode?||?null,?vnode,?container,?null,?null)??}?else?{????if?(container._vnode)?{??????//?卸载，清空容器???????=?????}??}??//?新的?vnode?赋值给?container?的?_vnode?属性??container._vnode?=?vnode}

总的来说，在Vue3中，render函数更复杂的逻辑其实是交给了patch，它只是作为一个两边函数，去调用patch。留意，render是被前往出去了，也就是说咱们可以经过

const?{?render?}?=?createRenderer()render(vnode,?container)//?orconst?renderer?=?createRenderer()(vnode,?container)

来间接调用它

它也在createAppAPI->mount->createVnode+render()中被经常使用

对于render的关联相关如下图：

对于patch的详细接纳参数

另外，上边卸载容器的形式经常使用了=，这是不谨严的，由于：

容器的内容或许是由某个或多个组件渲染的，当卸载操作出现时，应该正确地调用这些组件的beforeUnmount、unmounted等生命周期函数

即使内容不是由组件渲染的，有的元素存在自定义指令，咱们应该在卸载操作出现时正确口头对应的指令钩子函数

经常使用innerHTML清空容器元素内容的另一个毛病是，它不会移除绑定在DOM元素上的事情解决函数

正确的操作应该是依据vnode对象失掉与其相关联的实在DOM元素，而后经常使用原生DOM操作方法将该DOM元素移除。

所以咱们在mountElement中给援用了实在的DOM元素，让vnode与实在DOM建设起了咨询，卸载的时刻就经上来口头removeChild方法成功卸载。

咱们用代码来解释这一段话：

//?省略其它代码，这里?vnode?是?null，然而?挂载点存在?_vnode，说明须要口头卸载操作if?(container._vnode)?{??//?依据?vnode?失掉要卸载的实在?DOM?元素??const?el?=?container._??//?失掉?el?的父元素??const?parent?=???//?调用?removeChild?移除元素??if?(parent)?(el)}自定义渲染器

下面咱们提到了renderer渲染器是允许共性化性能才干来成功跨平台的，也就是说别想当然的了解成只能在阅读器里去做渲染。

理想上咱们可以这么经常使用renderer渲染器来成功咱们自己的自定义渲染，这里咱们展示一个打印渲染器操作流程的自定义渲染器：

创立渲染器：

const?renderer?=?createRenderer({createElement(tag)?{?(`创立了元素?${tag}`)?return?{?tag?}},setElementText(el,?text)?{?(`设置?${(el)}?的文本内容:?${text}`)},insert(el,?parent,?anchor?=?null)?{?(`将?${JSON>stringify(el)}?减少到?${(parent)}?下`)??=?el}})

验证这个渲染器的代码:

const?vnode?=?{type:?h1,shapeFlag:?9,?//?标识以后节点是?element?且?children?也是?elementchildren:?Hello?Btrya}//?经常使用一个对象模拟挂载点const?container?=?{?type:?app?}(vnode,?container)

而后咱们就能在阅读器看到咱们的揭示出现了：

在codesandbox中尝试

这里的shapeFlag的机制在Vue3中特意无心思，咱们后边会讲到。

patch函数

这是本章的重点函数，patch函数，再次强调一下它的作用：

初次渲染，口头挂载

新旧节点比拟变卦内容并更新

其重要接纳参数如下：

?patch(n1,?n2,?container,?parentComponent,?anchor)shapeFlag的机制

shapeFlags是Vue3用于判别以后虚构节点的一个类型。

文件的位置在package/shared/中

概略如下：

export?const?enum?ShapeFlags?{??ELEMENT?=?1,??FUNCTIONAL_COMPONENT?=?1?<<?1,??STATEFUL_COMPONENT?=?1?<<?2,??TEXT_CHILDREN?=?1?<<?3,??ARRAY_CHILDREN?=?1?<<?4,??SLOTS_CHILDREN?=?1?<<?5,??TELEPORT?=?1?<<?6,??SUSPENSE?=?1?<<?7,??COMPONENT_SHOULD_KEEP_ALIVE?=?1?<<?8,??COMPONENT_KEPT_ALIVE?=?1?<<?9,??COMPONENT?=?_COMPONENT?|?_COMPONENT}

咱们能看到实践上是经常使用了一个枚举来标识不同的类型，应用了位运算符<<来让1向左位移n位。

其中ELEMENT示意的就是元素，它的值是1咱们还能看到TEXT_CHILDREN示意的其实就是子元素是文本类型，它的值是1<<3=1000(2进制)=8

那么一个元素它的子元素是文本类型它就可以被示意为1001(2进制)=9

在判别的时刻经常使用位运算符&就可以知道以后的元素能否具有对应的类型了，比如：

return?{??render,??hydrate,??createApp:?createAppAPI(render,?hydrate)}0

在Vue3中就是应用这样的判别来知道这个虚构节点能否具有一个或多个类型。

那么一个vnode是怎样计算它的shapeFlag的呢？

疑问：vnode是怎样计算它的shapeFlag的呢？

在createVnode的时刻，其实会有一个初始化的操作，判别以后的这个vnode的一个基本类型，详细如下：

return?{??render,??hydrate,??createApp:?createAppAPI(render,?hydrate)}1

那么区分就可以失掉ELEMENT、SUSPENSE、TELEPORT、STATEFUL_COMPONENT、FUNCTIONAL_COMPONENT这五种基本类型中的其中一种

接着就会依据以后vnode的children进一步判别children的类型，经过位运算符来|=启动兼并，比如：

return?{??render,??hydrate,??createApp:?createAppAPI(render,?hydrate)}2

比如如今的children是TEXT_CHILDREN，vnode的基本类型是ELEMENT，那么依据枚举咱们可以知道它的shapeFlag最终就是1001=9

改头换面的 Vue3 中文文档来了！

新文档地址： / 中文版翻译： /旧版中文版： （官网已标注为旧版）新文档的重要变动包括：1. 新增了深色形式2. 照应式设计3. 在指引、教程和范例中新增API格调切换性能（选用Options或许Composition API）4. 全新的互动教程5. 新增了例子,包括7GUIs的成功6. 更快的查找API7. 重做了指引，重写了 Typescript 指引，重写了深化照应式系统，重写了渲染机制，全新的可组合函数指引，新的工具链指引，新的性能指引8. 单页面导航+智能预读取视口中的链接9. 经常使用 VitePress 构建10. 智能水合局部静态内容新文档学习笔记开局简介极速开局基础创立 Vue 运行模板语法照应式基础计算属性类与样式绑定条件渲染列表渲染事情解决表单输入绑定生命周期钩子侦听器模板 ref组件基础深化组件组件注册Props组件事情透传 attribute插槽依赖注入异步组件可重用性可组合函数自定义指令插件内置组件TransitionTransitionGroupKeepAliveTeleportSuspense更新规模单文件组件工具链路由形态治理测试服务端渲染 (SSR)最佳通常消费环境部署性能无阻碍访问安保与TS搭配 Typescript 经常使用 VueTypescript 与组合式 APITypescript 与选项式 API进阶多种形式经常使用 Vue组合式 API FAQ深化照应式系统渲染机制渲染函数 & JSX补充说明新文档的中文版翻译曾经成功，包括英文版中稳固的页面。

新文档的中文版曾经可以开局供大家阅读。

在阅读环节中或许会遇到一些页面未翻译的疑问，由于中文版非正式上线，或许存在疑问。

欢迎一同介入出去，独特提高文档的品质。