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: 实例化

import { Vue } from 'vue'
const App = { //component's options }
const app = new Vue(App)
app.mount('#app')

3. vue3 实例化

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模板字面量），以`符号表示，并保持代码的可读性。

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，应用程序随即进行渲染。