vue的权衡艺术

最新推荐文章于 2024-07-10 15:45:24 发布

南瑜呀

最新推荐文章于 2024-07-10 15:45:24 发布

阅读量197

点赞数 1

分类专栏： vue知识总结文章标签： vue.js 前端学习

本文链接：https://blog.youkuaiyun.com/m0_63757700/article/details/129475508

版权

总结同时被 2 个专栏收录

57 篇文章

订阅专栏

vue知识

7 篇文章

订阅专栏

文章探讨了命令式和声明式框架的区别，指出声明式代码的性能并不一定优于命令式，而虚拟DOM被引入来优化更新性能。虚拟DOM通过Diff算法减少DOM操作，提高性能。同时，文章提到了框架设计中的Tree-Shaking技术，用于删除未使用的代码，提高包的效率。在Vue.js3中，渲染器和编译器的角色也被详细解释，强调它们在转换虚拟DOM和真实DOM以及优化更新过程中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.命令式和声明式

1.1:从范式上看，视图分为命令式和声明式。其中jQuery是典型的命令式框架。

命令式框架和声明式框架的区别：

命令式框架的一大特点就是关注过程；

声明式框架的特点关注结果，展示结果；

声明式的代码的性能并不优于命令式代码的性能；

推论：毕竟框架本身就封装了命令式代码才是实现了面向用户的声明式，这符合上面说的性能结论：声明式的代码的性能并不优于命令式代码的性能。

1.2：框架设计者在设计框架时要遵循的原则：在保持可维护性的同时让性能损失最小化

==声明式代码的更新性能消耗=找出差异的性能消耗+直接修改的性能消耗==

2.虚拟dom

2.1：什么是虚拟dom

如果我们能够最小化的找到差异的性能消耗，就可以让声明式代码的性能能无限接近命令式代码的性能。而所谓的虚拟dom就是为了最小化找出差异这一步性能消耗而出现的。(拓展：在vue.js3的设计思路一章中是这样描述虚拟dom的：==使用Js对象来描述UI的方式其实就是所谓的虚拟DOM==)

2.2innerHtml创建页面的性能

innerHtml创建页面的性能=HTML字符串拼接计算量+innerHtml的DOM计算量

2.3innerHTML和虚拟DOM的区别：

虚拟dom在页面更新的时候只会更新必要元素，innerHTML需要全量更新

影响虚拟dom的性能和innerHTML性能不一样

对于虚拟dom 来说，无论页面多大，都只会更新变化的内容，而对于innerHTML来说，页面越大，意味着更新消耗的性能越大。

compiler的程序的作用：把Html字符串编译成树型结构的数据对象。

3.总结

==原生js操作DOM的方法（如 document.creatElement）,虚拟dom和innerHtml==三者操作页面的性能，不可以简单的下定论，这与==页面大小，变更部分的大小都有关系，除此之外与创建页面，更新页面也有关系==。并且经过一番权衡之后发现==虚拟dom==是个不错的选择。

二.框架设计的核心要素

1.框架中的Tree-Shaking

1.什么是Tree-Shaking?

Tree-Shaking指的是那些永远不会被执行的代码，也就排除了dead code(即：永远不会执行的代码)。并且无论是rollup.js还是webpack都支持Tree-Shaking.

2.实现Tree-Shaking的前提条件

想要实现Tree-Shaking必须满足一个条件，即：模块必须是ESM（即ES Moudle：是 JavaScript 官方的标准化模块系统，所有的主流浏览器都支持ESM）,因为Tree-Shaking依赖ESM的静态结构。

拓展：
谷歌浏览器、360安全浏览器、微软edge浏览器、火狐浏览器、QQ浏览器 国内/世界五大浏览器名称

3.Tree-Shaking的工作流程

以Tree-Shaking在rollup.js的工作流程为例：

1)目录结构如下：

2）首先装rollup.js:

yarn add rollup -D
//或者 npm install rollup -D

3)下面是为input.js和utils.js编辑的内容

input.js:

//文件名：input.js
import {foo} from './utils.js'
foo()

utils.js:

//文件名：utils.js
export function foo(obj){
    obj&&obj.foo
}
export function bar(obj){
    obj&&obj.bar
}

虽然我们在utils.js中导入了foo函数和bar函数，然后通过import在input.js中导入了foo函数并执行，注意并没有导入bar函数，所以这个时候Tree-Shaking就会起作用，bar就会作为dead code被移除，在生成的bundle.js中不存在，具体如下：

4）执行下方命令进行构建：

npx rollup input.js -f esm -o bundle.js

这个命令的意思是以input.js为入口文件输出ESM，输出的文件名为build.js.

bulid.js里的代码：

//文件名：build.js
function foo(obj){
    obj&&obj.foo
}
foo();

三.vue.js3的设计思路

1.什么是渲染器，它的作用是什么？

渲染器的作用：将虚拟DOM通过渲染器转化成真实DOM

例如：

return h('h1',{onClick:handler})//虚拟Dom
//相当于js对象
/*
return {
tag:'h1',//标签名称
props:{onClick:handler}//标签属性
}
*/
//相当于页面中的
/*
<h1 onClick='handler'></h1>
*/

==补充：==

$\textcolor{red}{在ts文件中常见到的container代表的是：一个真实的DOM元素，作为挂载点，该渲染器会把虚拟DOM渲染到该挂载点下面；vnode:虚拟Dom元素；例如：render(vnode,container)函数，变量名可变}$

虚拟dom的作用：

虚拟dom除了能够描述真实的dom之外还能描述组件（注意：组件并不是真实的DOM元素)。

组件的实质：

组件是一组DOdeneM元素的封装，这组dom元素就职组件要渲染den'e

编译器的作用：

编译器的作用：将模板编译为渲染函数并添加到标签块的组件对象上，把虚拟的DOM转化成真实的DOM。

渲染器（编译器）的工作原理：递归的遍历虚拟DOM元素，并调用原生的DOMAPI来完成真实的DOM创建。

渲染器可以通过Diff算法找出变更点，并且只会更新需要的更新的内容。

什么是subtree?

渲染器在渲染组件时，会先获取组件姚渲染的内容，即执行组件的渲染函数并得到其返回值，我们称之为subtree，最后再递归地调用渲染器将subtree渲染出来即可。