参考#xff1a;速读《Vue.js

标题博客第一篇#xff1a;框架设计概览【Vue.js设计与实现】第一篇#xff1a;框架设计概览-阅读笔记第二篇#xff1a;响应系统【Vue.…

参考速读《Vue.js

标题博客第一篇框架设计概览【Vue.js设计与实现】第一篇框架设计概览-阅读笔记第二篇响应系统【Vue.js设计与实现】第二篇响应系统-阅读笔记第三篇渲染器【Vue.js设计与实现】第三篇渲染器-阅读笔记第四篇组件化【Vue.js设计与实现】第四篇组件化-阅读笔记第五篇编译器【Vue.js设计与实现】第五篇编译器-阅读笔记第六篇服务端渲染【Vue.js设计与实现】第六篇服务端渲染-阅读笔记

第一篇框架设计概览

__DEV__在开发环境中为用户提供友好的警告信息的同时不会增加生产环境代码的体积2.2

/*#__PURE__*/与Tree

divdocument.querySelector(#app)

//获取div

div.addElementListener(click,(){alert(OK)})

//绑定事件声明式

world/divvue的内部是命令式的而我们使用vue的时候是声明式的。

1.2

命令式的代码通过原生的JS实现声明式的代码要实现同样功能时还要再调用相同的命令式代码。

显然命令式的性能更高。

此时vue还要对外暴露出声明式的接口原因是声明式的可维护性远大于命令式的可维护性

在前端领域用JS修改HTML的方式主要有3种原生JSinnerHTML虚拟DOM。

心智负担虚拟DOM

虚拟DOM的性能并不是最高的但是vue依然选择虚拟DOM来进行渲染层的构架。

1.3

注意存在编译过程可以分析用户提供的内容。

同时没有运行时理论上性能会更好。

运行时编译时

先把template模板转化成render函数即编译时再利用render函数把虚拟DOM转化为真实DOM即运行时

2.1

__DEV__在开发环境中为用户提供友好的警告信息的同时不会增加生产环境代码的体积

有一个常量__DEV__存在于所有的console.warn中

(__DEV__

}在开发环境中__DEV__永远为true在生产环境中__DEV__永远为false。

永远不会执行的代码成为dead

2.2

Shaking的关键点副作用。

如果一个函数调用会产生副作用那么就不能将其移除。

副作用就是当调用函数的时候会对外部产生影响例如修改了全局变量。

举个例子

夹子中修改了某个全局变量。

而到底会不会产生副作用只有代码真正运行的时候才能知道JavaScript

dead

foo()注释代码/*#__PURE__*/就是告诉rollup.js对于foo的调用不会产生副作用可以Tree-Shaking。

foo()

}可以看到对于顶级调用来说是可能产生副作用的对于函数内调用来说只要函数

bar

/scriptESM格式的资源中文件会有一个-browser字样。

其实对于ESM格式的资源来说Vue.js还会输出一个vue.esm-bundler.js

文件。

这样做的原因是在寻找资源时如果package.json中存在module字段那么会优先使用module字段指向的资源来代替main字段指向的资源。

如Vue.js源码中的packages/vue/package.json

{main:index.js,module:dist/vue.runtime.esm-bundler.js

}带有

当我们构建提供给打包工具的ESM格式的资源时不能直接把__DEV__设置为true或false而是process.env.NODE_ENV!production。

即当前环境不是生产环境.

如源码

})如果用户在执行回调函数时出错了怎么办有两个方法让用户自己处理、vue代替用户统一处理错误。

用户自己处理

utils.foo((){try{//...}catch(e){//...}

vue代替用户统一处理错误

将错误处理程序封装为一个函数如callWithErrorHanding

export

{callWithErrorHanding(fn);},bar(fn)

};function

registerErrorHandler函数用户可以使用它注册错误处理程序在callWithErrorHanding捕获错误后把错误传给用户注册的错误处理程序

export

用户可以调用该函数注册统一的错误处理函数registerErrorHandler(fn)

{handleError

将捕获到的错误传递给用户的错误处理程序handleError(e);}

}这时错误处理的能力完全由用户控制用户既可以选择忽略错误也可以调用上报程序将错误上报给监控系统。

import

开发体验是衡量一个框架的重要指标之一。

大多数情况下“框架”要比开发者更清楚问题出在哪里因此在框架层面抛出有意义的警告信息是非常必要的。

__DEV__

对于框架的输出产物不同类型的产物是为了满足不同的需求。

为了让用户能够通过

script

有时出于灵活性和兼容性的考虑对于同样的任务框架提供了两种解决方案如组合式API/选项式API。

不被使用的方案会被

Tree-Shaking

框架的错误处理做得好坏直接决定了用户应用程序的健壮性同时还决定了用户开发应用时处理错误的心智负担。

框架需要为用户提供统一的错误处理接口这样用户可以通过注册自定义的错误处理函数来处理全部的框架异常。

第三章Vue.js

对象描述UI比模板描述更加灵活。

如表示一个标题根据标题级别的不同会分别采用

h1~h6

};这里的h函数返回值是一个对象其作用是让我们编写虚拟DOM更加轻松。

也可以这样写

export

};tag标签名称props一个对象描述属性、事件等children标签的子节点

DOM

document.createElement(vnode.tag);//

vnode.props将属性、事件添加到

{el.addEventListener(key.substring(2).toLowerCase(),vnode.props[key]);}}//

处理childrenif

文本子节点el.appendChild(document.createTextNode(vnode.children));}

else

(Array.isArray(vnode.children))

{//

作为挂载点vnode.children.forEach((child)

renderer(child,

将元素添加到挂载点下container.appendChild(el);

div

上述仅仅只是创建节点渲染器的精髓在更新节点渲染器只更新修改的部分而不是重新渲染全部节点。

3.3

document.createElement(vnode.tag);//

vnode.props将属性、事件添加到

{el.addEventListener(key.substring(2).toLowerCase(),vnode.props[key]);}}//

处理childrenif

文本子节点el.appendChild(document.createTextNode(vnode.children));}

else

(Array.isArray(vnode.children))

{//

作为挂载点vnode.children.forEach((child)

renderer(child,

将元素添加到挂载点下container.appendChild(el);

}function

}实际上组件不一定得是函数也可以是对象。

对象里有一个render函数返回一个虚拟DOM。

const

subtreevnode.tag.render()renderer(subtree,

container);}function

};对于组件来说它要渲染的内容都是渲染函数产生的然后渲染器再把渲染函数返回的虚拟

DOM

/template这里cls是一个变量通过v-bind动态绑定到class上。

渲染器的作用之一就是寻找并且只更新变化的内容。

在这里编译器能识别出哪些是静态属性哪些是动态属性在生成代码的时候完全可以附带这些信息它生成的虚拟DOM如下

render()

编译器和渲染器之间是存在信息交流的它们互相配合使得性能进一步提升而它们之间交流的媒介就是虚拟

DOM

是一个声明式的框架。

声明式的好处在于它直接描述结果用户不需要关注过程。

描述UI

DOM

的函数也可以是一个对象但这个对象下必须要有一个函数用来产出组件要渲染的虚拟

编译器把Vue.js

的核心组成部分它们共同构成一个有机的整体不同模块之间互相配合进一步提升框架性能。