Vue渲染系统模块

会说法语的猪

已于 2023-07-28 13:33:54 修改

阅读量398

点赞数

分类专栏： vue javascript 文章标签： vue.js 前端 javascript

于 2023-07-17 13:17:17 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51431448/article/details/131763978

版权

javascript 同时被 2 个专栏收录

88 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

vue

80 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何构建一个简单的Mini-Vue框架的渲染系统模块，包括h函数用于创建VNode对象，mount函数将VNode转换为真实DOM并挂载，以及patch函数通过diff算法更新DOM。核心功能涉及处理不同类型的属性和子元素。

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

我们想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块。

这篇就来写一下渲染系统模块。剩下两个模块后面有时间再更新。

vue渲染系统实现，应该包含三个功能，分别是：① h函数，用于返回一个VNode对象；② mount函数，用于将VNode转为真实dom，并挂载到DOM上；③ patch函数，类似于diff算法，用于对比两个VNode，决定如何处理新的VNode

虚拟dom本身其实就是个javascript对象。这里会写一些核心逻辑，大家如果看vue源码的话，会发现里面有非常多的边界情况的处理判断。我们只需要知道核心逻辑就可以了，也就是下面所写的。

下面写的会有用到个判断类型的方法，getObjType如下：

也是最准确的判断数据类型的方法

function getObjType(obj) {
  let toString = Object.prototype.toString
  let map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]'

了解本专栏

超级会员免费看