526互联

模版和渲染函数

发布时间 2024-01-03 21:36:09作者: 黑逍逍

Virtual DOM (虚拟 DOM)： 

挂载 (mount)：一个运行时渲染器将会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树。这个过程被称为挂载 (mount)。

更新 (patch)：如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上。

 

模版和渲染函数（vue2）：

模板 (Template):

允许开发者以声明式的方式编写UI。开发者可以在其中使用各种Vue指令（如v-if, v-for, v-model, v-on等）来声明式地描述UI和UI如何随数据变化而变化

模板是声明式的HTML代码，它描述了组件的结构。开发者通常会在模板中使用特定的语法来声明如何将数据渲染到界面上。在Vue.js中，模板代码：

<div>
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
</div>

 在这个例子中，{{ title }} 和 {{ message }} 是数据绑定的占位符，它们告诉框架需要将相应的数据插入到这些位置

 

渲染函数 (Render Function):

渲染函数是组件的一部分，它直接负责生成和更新组件的虚拟DOM（VNodes）

data、methods和render是三个核心选项，它们共同定义了组件的状态、行为和输出

  1. data（数据）:

    • data选项为组件提供响应式的数据源。这些数据是组件状态的基础，可以在组件的任何地方被访问和修改，包括在渲染函数中。
    • 当data中的数据变化时，Vue的响应式系统会自动检测到这些变化，并触发组件的重新渲染。

  2. methods（方法）:

    • methods选项包含一系列定义在组件上的函数，这些函数可以处理事件、执行计算或表达业务逻辑。
    • 在渲染函数中，你可以调用methods中定义的方法来响应用户交互或者计算动态数据。这些方法通常与事件监听器（如点击事件）相关联，并且可以修改data中的数据，从而触发视图的更新。

  3. render（渲染函数）:

    • render函数是组件的核心，它定义了如何将组件的状态（data）和行为（methods）转换为虚拟DOM结构。
    • 它使用Vue提供的h函数来创建虚拟节点（VNodes）。h函数是对Hyperscript的引用，是一种用JavaScript创建虚拟DOM的方式。
    • 渲染函数可以访问data和methods，以便在创建虚拟DOM时使用当前的状态和可用的方法。

渲染过程

 

  1. 模板（Template） - 这通常是指开发者编写的声明式代码，用于定义用户界面的结构。模板中可以包含数据绑定和指令。

  2. 编译成（compiled into） - 模板被编译成可执行的渲染函数代码。这个过程一般在构建阶段或者运行时进行。

  3. 渲染函数代码（render function code） - 编译后的代码，通常是JavaScript，它定义了如何将数据转换成虚拟DOM节点。

  4. 返回（returns） - 渲染函数执行后返回虚拟DOM树，这是对实际DOM的一个轻量级表示。

  5. 虚拟DOM树（Virtual DOM tree） - 一个简化的DOM表示，用于高效地计算实际DOM更新所需的最小变化。

  6. 挂载/打补丁（mount / patch） - 这一步将虚拟DOM树转换成实际的DOM树，并将其挂载到浏览器中。在数据变化导致界面需要更新时，只有变化的部分会通过打补丁的方式更新到实际的DOM中，这样可以提高性能。

  7. 实际DOM（Actual DOM） - 浏览器中的实际文档对象模型（DOM），用户看到并与之交互的界面。

  8. 组件响应式状态（component reactive state） - 组件的状态是响应式的，任何状态的变化都能触发重新渲染。

  9. 触发重新渲染（trigger re-render） - 当组件的响应式状态改变时，会触发模板的重新渲染。

  10. 追踪依赖（track dependencies） - 渲染函数会追踪哪些状态（或“依赖”）被用于渲染，这样当这些状态变化时，它就知道需要重新渲染