我明白了,Vue3设计与实现-vue3的设计思路读后感

简介: 第二章了解了一个框架设计的核心要素,vue在这方面表现很不错。 开发体验、框架的体积、输出的资源格式、特性的开关、错误的处理、类型支持等等,vue都有考虑。

前言

第二章了解了一个框架设计的核心要素,vue在这方面表现很不错。
开发体验、框架的体积、输出的资源格式、特性的开关、错误的处理、类型支持等等,vue都有考虑。
让我对接下来的章节更加感兴趣了,开始第三章 vue3的设计思路,很棒哇,我特别想知道,好,开始看。

声明式描述UI

通过模板来描述UI:vue中可以直接使用声明式的使用 html标签+属性+事件来创建一个带属性带事件操作的DOM元素。这种性能做过优化。

通过JS对象来描述UI:也支持你通过自定义虚拟DOM(JS对象)来创建一个带属性带事件操作的DOM元素。这种比较灵活。

vue的h函数是用来拿到虚拟DOM(js对象)的,然后通过render函数递归的渲染DOM元素或者组件。

渲染器

渲染器的作用是将虚拟dom转成真实DOM,这种转换是通过虚拟dom的结构来进行遍历,取出里面的tag、事件、children内容等等,然后通过常规的DOM操作来生成真实的DOM,并挂载到页面中。

render函数的参数 就是虚拟dom和DOM容器,也就是将虚拟DOM转成真实DOM并挂载到你传入的容器中。

组件本质

组件里面装的就是一堆DOM元素的字符串,这些字符串最终会被转成虚拟DOM,然后还是会用到renderer函数去转成真实的DOM。

虚拟dom的tag如果是普通标签就会使用mountElement来转成真实dom并且挂载。

虚拟dom的tag如果是函数,那么就代表它是个组件,那么就会使用mountComponent,里面的renderer函数来转成真实dom并且挂载。

虚拟dom的tag如果是对象,那么也可以代表它是个组件,那么就会调用这个对象的render函数来获取虚拟dom,然后再使用renderer函数来转成真实dom并且挂载。

组件的tag可以有多种表达形式,函数、对象都行。有状态的组件采用的是对象结构来表达的。

模板工作原理

编译器将html模板转成生成虚拟dom的函数,然后再由虚拟dom转成真实dom并挂载。

各个模块组成的有机整体

渲染器将虚拟dom转成真实dom。

编译器将模板转成生成虚拟dom的函数,不仅如此,编译器可以给虚拟dom打上标记,从而可以通过知道那些虚拟dom会发生变化,哪些虚拟dom不会发生变化,也就是静态和动态之分,从而让渲染器更快的找到要更新的DOM元素,更新的效率就更高了。

总结

vue采用模板来描述UI,编译器会将模板转成生成虚拟dom的函数,并且对dom进行标记,最终使用渲染器来将虚拟dom转成真实dom并挂载到页面中。

渲染器中的使用的是常规的dom操作,通过虚拟dom递归的创建dom并挂载。

编译器和渲染器都是vue的核心组成部分,它们互相配合,形成一个有机整体,从而进一步提升框架性能。

目录
相关文章
|
2天前
|
JavaScript 前端开发 C++
Vue3视图渲染技术(1)
Vue3视图渲染技术(1)
6 0
Vue3视图渲染技术(1)
|
1天前
Vue3项目 小兔鲜问题总结
Vue3项目 小兔鲜问题总结
9 2
|
1天前
vue3基本指令使用
vue3基本指令使用
7 2
|
2天前
|
JavaScript 前端开发 API
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
|
2天前
Vue3——tdesign-vue-next如何按需加载动态渲染ICON
如题,在vue3中进行按需加载来动态的渲染icon图标;
8 1
|
2天前
|
JavaScript API 网络架构
Vue3路由机制router(2)
Vue3路由机制router(2)
9 0
|
2天前
|
安全 定位技术 数据安全/隐私保护
Vue3路由机制router(1)
Vue3路由机制router(1)
8 0
|
2天前
|
缓存 监控 JavaScript
Vue3视图渲染技术(2)
Vue3视图渲染技术(2)
5 0
|
2天前
|
JavaScript
Vue3 状态管理 - Pinia,超详细讲解!
Vue3 状态管理 - Pinia,超详细讲解!
|
10天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
28 0