01-Vue.js 3 的设计思路

39 阅读1分钟

1、声明式描述UI

Vue所采用的组件描述是声明是的方式(也就是如

这种标签),这种方式并没有比JavaScript命令式组件更灵活,但更方便阅读和编写。

2、渲染器

Vue.js需要依赖渲染器把虚拟DOM渲染为真实DOM,大概过程如下图

编写一个渲染器的流程

1、创建元素

2、为元素添加事件和属性,调用 addEventListener 绑定事件处理函数

3、判断是否有子节点,如果有且是个数组,则遍历添加

4、更新,不应该将整个流程执行一遍,只需要修改产生变化的部分

3、组件的本质

一句话概括:组件就是一组DOM元素的封装

(番外:什么是虚拟DOM,简单来说就是JavaScript对象)

4、模板的工作原理

模板需要通过编译器编译为渲染函数(编译器也是一段程序)

.vue文件中标签就是模板,编译器会把模板内容渲染到

总结

Vue.js通过编译器编译出渲染函数,也就是渲染器(编译器和渲染器都是一段程序),通过渲染器把模板的内容动态渲染到