![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue设计与实现(基于vue3)
文章平均质量分 54
coder_MX
懒 的去偷懒了
展开
-
初识渲染器
相信大家都很明确上述虚拟 DOM 要处理怎样的事情,首先我们可以看到他是一个树形结构的 JavaScript 对象,我们需要有一个渲染函数,他接受的参数就是上述类型的 JavaScript 对象,然后将其转换成一个真实的 DOM,放置在页面上,渲染器是非常重要的一个角色,我们所使用的 Vue.js 组件都是要依赖渲染器来工作,这是一个非常重要的工作环节,这里我们初步了解一下渲染器的工作原理。我们已经知道什么是虚拟 DOM 了,那么,虚拟 DOM 该如何变成真实的 DOM 呢?最后我们执行渲染函数。原创 2023-11-02 11:50:47 · 82 阅读 · 0 评论 -
声明式的描述UI
由上述可得,在Vue.js中,哪怕是事件,都有之对应的描述方式,用户不需要写任何命令式的代码,这就是所谓的声明式的UI。首先我们要知道Vue.js3是一个声明式的UI框架,意思是说用户在使用Vue.js3开发页面时是声明式的描述UI的。那么我们来思考一下,如果让你设计一个声明式的UI框架,你会怎么设计呢?我们了解一下编写前端页面都要涉及哪些内容,如下。声明式的形式应该如何描述上面的内容呢?这就是框架设计需要思考的地方,vue3是这样解决的。原创 2023-11-02 10:18:11 · 107 阅读 · 0 评论 -
Tree-Shaking (副作用)
接着上个帖子提出的疑问,我们深入研究一下为什么没有剔除foo函数。其实这里涉及到了Tree-Shaking中的第二个关键点—副作用。顾名思义,即一个函数的调用,可能对其他地方造成修改,那么在打包的过程中我们就不能将其剔除。这个时候又要有人说,这个foo函数仅仅时对对象的值进行了获取obj.foo,没有其他的修改。我们再一步深入,如果这个obj对象是一个通过Proxy代理的对象,读取它的属性就会触发该属性的get夹子,那在get夹子中会不会有造成其他变量的改变呢?原创 2023-10-24 15:36:36 · 132 阅读 · 0 评论 -
Tree-Shaking (自动剔除`dead-code`)
我们有一个demo工程文件内容分别是:上面是一个很直观且简单的例子,utils.js文件中导出了两个函数,分别是foo与bar,然后在input.js中导入了foo函数并执行。但是我们并没有导入bar函数。下面我们使用 rollup.js 进行构建:使用input.js作为入口,打包出来的文件为bundle.js我们不难发现,在最终生成的bundle.js中,我们没有发现utils.js中导出的bar函数,这是为什么呢?就是因为这块代码在至始至终都没有被使用到,所以它被当成被删除了。原创 2023-10-24 15:11:46 · 54 阅读 · 0 评论 -
框架的选择(运行时&编译时)
纯运行时框架:由于它没有编译的过程,因此我们没办法分析用户提供的内容。运行时+编译时:可以分析用户提供的内容,看看哪些内容未来可能会改变,哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信息,然后将其传递给 Render 函数,Render 函数得到这些信息之后,就可以做进一步的优化纯编译时:也可以分析用户提供的内容。由于不需要任何运行时,而是直接编译成可执行的 JavaScript 代码,因此性能可能会更好,但是这种做法有损灵活性,即用户提供的内容必须编译后才能用##拓展纯编译时。原创 2023-10-23 20:49:50 · 105 阅读 · 0 评论 -
虚拟DOM的性能
到这里可能你还会有人讲,innerHTML的性能还是有可能优于虚拟DOM,那么,如果页面的元素数量级很高,如果还采取DOM销毁与创建,性能定然没有虚拟DOM好!使用innerHTML更新页面的的过程是**重新构建HTML字符串,再重新设置DOM元素的innerHTML属性,**那么这样将来,即使是我仅仅更新了一个元素中的一个文字,就等价于。这里我们从宏观的角度只看数量级上的差异。为了渲染出一个页面,首先要把字符串解析成了DOM树,这是一个涉及DOM的计算,因此,它的性能消耗远比Javascript大的多。原创 2023-10-23 19:40:12 · 40 阅读 · 0 评论 -
性能与可维护性的权衡(Vue设计方案的选择)
命令式和声明式各有优缺点,在框架的设计方面,则体现在性能与可维护性之间的权衡。原创 2023-10-23 10:47:18 · 34 阅读 · 0 评论 -
命令式框架和声明式框架
命令式框架更加关注过程不同。原创 2023-10-22 12:24:40 · 43 阅读 · 0 评论