前端框架原理

最新推荐文章于 2025-04-02 13:16:49 发布

WWWln1234

最新推荐文章于 2025-04-02 13:16:49 发布

阅读量2.4k

点赞数

分类专栏：前端框架原理文章标签：前端框架原理

本文链接：https://blog.youkuaiyun.com/sinat_32308611/article/details/89817647

版权

前端框架原理专栏收录该内容

1 篇文章

订阅专栏

本文深入剖析前端框架原理，围绕Vue和React展开。介绍了vdom的概念、应用及diff算法，以减少DOM操作提高效率；阐述MVVM模式，包括数据与视图分离、响应式实现和模板解析；探讨组件化，涉及组件封装复用、JSX语法及与vdom关系；还比较了React和Vue的异同。

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

框架原理

虚拟DOM
vue
React
对比

1.vdom

vdom使vue和react的核心，先讲哪个都绕不开它

vdom比较独立，使用也比较简单

vdom是什么？为何会存在vdom？

virtual dom，虚拟DOM
DOM的操作非常昂贵，JS的运行效率高
尽量减少DOM的操作，而不是推倒重来
用JS模拟DOM结构
DOM的变化的对比，放在JS层来做（图灵完备语言），提高效率
提高重绘性能

浏览器最耗费性能的是DOM操作，JS循环1万次都比不过DOM操作的耗费

一个需求场景：

遇到的问题：

DOM操作时昂贵的，JS运行效率高
尽量减少DOM操作，而不是推倒重来
项目越复杂，影响就越严重
vdom可解决这个问题

vdom如何应用，核心API是什么

h("标签名",{...属性...},[...子元素...])
h("标签名",{...属性...},"...")
patch(container,vnode)
patch(vnode,newVnode)

解答：

如何使用？可使用snabbdom的用法来举例

核心API：h函数、patch函数

介绍snabbdom（vdom的库）

重做之间的demo

介绍一下diff算法

什么是diff算法

去繁就简

vdom为何用diff算法

DOM操作是昂贵的，因此尽量减少DOM操作

找出本次DOM必须更新的节点来更新，其他的不更新

这个找出的过程，就需要diff算法

diff算法的实现流程

patch(container,vnode);

patch(vnode,newVnode);

核心逻辑：createElement和updateChildren

2.MVVM

使用jQuery和vue或react的区别

数据和视图的分离
数据驱动视图

数据和视图的分离------>开放封闭原则

jQuery的数据和视图时在一起的，没有分离，新增li是通过js动态创建出来的

jQuery没有数据驱动视图，而是通过document.body.appendChld(node)直接操作DOM的

vue中数据和视图是分离的

vue中是数据驱动视图的，没有直接DOM操作

jQuery实现todo-list

vue实现todo-list

如何理解MVVM

MVC

MVVM

Model模型、数据
View视图、模板（视图和模型是分离的）
ViewModel 连接Model和View

MVVM不算是一种创新，但其中的ViewModel却是一种创新

如何实现MVVM?

vue框架的三大要素

修改数据后视图发生改变，怎么实现的？

模板如何解析(一些指令如v-for v-bind v-model)？

如何把模板和数据解析成DOM

三大要素：

响应式

vue如何监听到data的每个属性变化？

模板引擎

vue的模板如何被解析，指令如何处理？

渲染

vue的模板如何被渲染成html？以及渲染过程？

vue如何实现响应式

什么是响应式

修改data属性之后，vue立即监听到
data属性被代理到vm（this）上

Object.definedProperty(ES5的 )

模拟

模拟监听data属性和属性绑定到vue实例上

vue如何解析模板

模板是什么

本质：字符串
有逻辑，如 v-if v-for 等
与 html 格式很像，但有很大区别
最终还要转换为 html 来显示
模板最终必须转换成JS代码，

因为：

有逻辑(v-if v-for )，必须用JS才能实现（图灵完备）
转换为 html 渲染页面，必须用JS才能实现
因此，模板最重要转换成一个JS函数（render函数）

render函数

with函数

render函数

模板中所有信息都包含在了render函数中

this即vm

price即this.price即vm.price，即data中的price

c即this.c即vm._c

从哪里可以看到render函数？

复杂一点的例子。render函数是什么样子的？

v-if v-for v-on都是怎么处理的

with(this){  // this 就是 vm
            return _c(
                'div',
                {
                    attrs:{"id":"app"}
                },
                [
                    _c(
                        'div',
                        [
                            _c(
                                'input',
                                {
                                    directives:[
                                        {
                                            name:"model",
                                            rawName:"v-model",
                                            value:(title),
                                            expression:"title"
                                        }
                                    ],
                                    domProps:{
                                        "value":(title)
                                    },
                                    on:{
                                        "input":function($event){
                                            if($event.target.composing)return;
                                            title=$event.target.value
                                        }
                                    }
                                }
                            ),
                            _v(" "),
                            _c(
                                'button',
                                {
                                    on:{
                                        "click":add
                                    }
                                },
                                [_v("submit")]
                            )
                        ]
                    ),
                    _v(" "),
                    _c('div',
                        [
                            _c(
                                'ul',
                                _l((list),function(item){return _c('li',[_v(_s(item))])})
                            )
                        ]
                    )
                ]
            )
        }