跳至主要內容
框架设计的核心要素

提升用户的开发体验

  • 开发体验是衡量一个框架的重要指标之一

  • 提供友好的警告信息至关重要，这有助于开发者快速定位问题

  • 例如，在 vue3 中，当我们创建一个 Vue.js 应用并试图将其挂载到一个不存在的 DOM 节点是，就会收到一条警告信息

    [Vue warn]:Failed to mount app: mount target selector '#not-exist' return null.

    而不是

    TypeError: Cannot read property 'xxx' of null

    这是因为，框架内部为我们做了优化

GodX...大约 7 分钟前端vue
Vue3.js 的设计思路

声明式地描述 UI

  • Vue3 是一个声明式的框架，哪怕是事件都有与之对应的描述方式。用户不需要手写任何命令式代码
    • 使用与 HTML 标签一致的方式来描述 DOM 元素，例如描述一个 div 标签时可以使用 <div></div>
    • 使用与 HTML 标签一致的方式来描述属性，例如<div id="app"></div>
    • 使用 ：或者 v-bind 来描述动态绑定的属性
    • 使用 @ 或者 v-on 来描述事件
    • 使用与 HTML 标签一致的方式来描述层级结构
  • h 函数是一个辅助创建虚拟 DOM 的工具函数，其作用就是让我们编写虚拟 DOM 变得更加轻松
GodX...大约 3 分钟前端vue
响应式原理

数据驱动

数据响应式

数据模型仅仅是普通的 JS 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高了开发效率

双向绑定

  • 数据改变，视图改变；视图改变，数据也随之改变
  • 在 vue 中，我们通过 v-model 在表单元素上创建双向绑定

数据驱动

  • vue 最独特的特性之一
  • 开发过程中仅需要关注数据（业务）本身，不需要关心数据是如何渲染到视图的

响应式核心原理

GodX...大约 8 分钟前端源码分析vue
虚拟DOM的实现原理

目标

  • 了解什么是虚拟DOM，以及虚拟DOM的作用
  • Snabbdom 的基本使用
  • Snabbdom 的源码解析

什么是 Virtual DOM

本质上是以 JavaScript 对象形式存在的对 DOM 的描述，如下：

{
	sel: "div"，
	data: {},
	children: undefined,
	text:"Hello Virtual DOM",
	elm: undefined,
	key: undefined
}
GodX...大约 3 分钟前端源码分析vue
权衡的艺术

命令式和声明式（视图层框架）

命令式

有如下特点：

  • 自然语言描述能够与代码产生一一对应的关系，更加关注过程
  • 早期流行的jquery就是典型的命令式框架，如下：
$('#app')
  .text('hello world')
	.on('click',() => {alert('ok')})
GodX...大约 3 分钟前端vue