Learning Vue 读书笔记 Chapter 2

2. Vue 基本工作原理

2.1 Virtual DOM

  1. 概念:
    • DOM: DOM以内存中树状数据结构的形式,代表了网页上的HTML(或XML)文档内容。它充当了一个编程接口,将网页与实际的编程代码(如JavaScript)连接起来。
    • Virtual DOM 是浏览器中实际 DOM 的内存虚拟副本,但它更轻量且具有额外的功能。
  2. Virtual DOM 工作原理:
    通过用户界面交互,用户向Vue传达了他们希望元素达到的状态;随后,Vue触发虚拟DOM更新该元素所代表的对象(节点)至期望形态,同时记录这些变更。最终,Vue与实际DOM进行通信,并据此对发生变化的节点执行精确更新。

    5.Virtrual DOM vs DOM:
    • DOM 是浏览器解析 HTML 后生成的树形结构,节点是复杂的对象,直接操作性能开销较大。
    • Virtual DOM 是DOM 的轻量级副本,用简单的 JavaScript 对象表示,便于高效计算和更新。

2.2 Options API

  1. 概念: 组件的配置是一个包含所有组件初始配置选项的对象。我们将此参数的结构称为Options API。
  2. vue2: 实例化
js 复制代码
import { Vue } from 'vue'
const App = { 
	//component's options 
	}
const app = new Vue(App)
app.mount('#app')
  1. vue3 实例化
js 复制代码
import { createApp } from 'vue'
const App = { 
	//component's options 
	}
const app=createApp(App)
app.mount('#app')

接下来主要基于vue3 语法

2.3 模板语法

  1. 在 Options API中,template接受一个包含有效基于HTML代码的单一字符串,该字符串代表了组件的用户界面布局。Vue引擎会解析这一值并将其编译为优化的JavaScript代码,随后相应地渲染出相关的DOM元素。
  2. 对于多层次的HTML模板代码,我们可以使用反引号字符(JavaScript模板字面量),以`符号表示,并保持代码的可读性。
js 复制代码
import { createApp } from 'vue' 
const App = { 
	 template: ` <h1>This is the app's entrance</h1> 
				<h2>We are exploring template syntax</h2> `,
}
const app = createApp(App) 
app.mount('#app')

2.4 Vue 响应数据工作原理:

  1. data() 是一个返回表示组件本地数据状态的匿名函数。我们称这个返回的对象为数据对象。在初始化组件实例时,Vue引擎会将这个数据对象的每个属性添加到其响应式系统中,以便跟踪其变化并根据需要触发UI模板的重新渲染。
  2. 工作原理:

(1)一旦定义了本地数据,在Vue.js 2.0中,内部的Vue引擎会使用JavaScript内置的Object.defineProperty()为每个相关数据建立getter和setter,并启用相关的数据响应性。然而,在Vue.js 3.0中,Vue引擎采用了基于ES5 Proxy的机制以提升性能,使运行时性能翻倍并将所需内存减半。

(2)在建立了响应性机制之后,Vue引擎使用观察者(watcher)对象来跟踪由setter触发的任何数据更新。观察者帮助Vue引擎检测变化,并通过队列系统更新虚拟DOM和实际DOM。

(3)Vue使用队列系统来避免在短时间内对DOM进行低效的多次更新。当相关组件的数据发生变化时,观察者会将自己添加到队列中。Vue引擎按照特定顺序对其进行排序以供消费。在Vue引擎完成消费并将该观察者从队列中清除之前,无论数据发生多少次变化,队列中只存在同一组件的一个观察者。

这一消费过程是通过nextTick() API完成的,它是Vue的一个函数。

(4)最后,在Vue引擎消费并清除所有观察者之后,它会触发每个观察者的run()函数,自动更新组件的实际DOM和虚拟DOM,应用程序随即进行渲染。

相关推荐
IT_陈寒10 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码21 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation30 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1236 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体