Learning Vue 读书笔记 Chapter 2

embedded/2025/1/31 22:21:21/

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')
  1. 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,应用程序随即进行渲染。


http://www.ppmy.cn/embedded/158460.html

相关文章

当当网近30日热销图书的数据采集与可视化分析(scrapy+openpyxl+matplotlib)

当当网近30日热销图书的数据采集与可视化分析(scrapy+openpyxl+matplotlib) 当当网近30日热销书籍官网写在前面 实验目的:实现当当网近30日热销图书的数据采集与可视化分析。 电脑系统:Windows 使用软件:Visual Studio Code Python版本:python 3.12.4 技术需求:scrapy、…

【卫星通信】链路预算方法

本文介绍卫星通信中的链路预算方法&#xff0c;应该也适用于地面通信场景。 更多内容请关注gzh【通信Online】 文章目录 下行链路预算卫星侧参数信道参数用户侧参数 上行链路预算链路预算计算示例 下行链路预算 卫星侧参数 令卫星侧天线数为 M t M_t Mt​&#xff0c;每根天线…

计算机网络__基础知识问答

Question: 1&#xff09;在计算机网络的5层结构中&#xff0c;每一层的功能大概是什么&#xff1f; 2&#xff09;交换机的功能&#xff1f;https://www.bilibili.com/video/BV1na4y1L7Ev 3&#xff09;路由器的功能&#xff1f;https://www.bilibili.com/video/BV1hv411k7n…

12.udp

12.udp **1. UDP特性****2. UDP编程框架&#xff08;C/S模式&#xff09;****3. UDP发送接收函数****4. UDP编程练习** 1. UDP特性 连接特性&#xff1a;无链接&#xff0c;通信前无需像TCP那样建立连接。可靠性&#xff1a;不可靠&#xff0c;不保证数据按序到达、不保证数据…

SkyWalking介绍

一款开源的系统性能监控工具(APM) 背景 在解决提报的IT性能问题时&#xff0c;由于缺乏系统性能监控运维的工具&#xff0c;导致问题排查非常困难&#xff0c;尤其是偶发的问题&#xff0c;无法进行问题复现还原&#xff0c;需要一套能实时监控线上系统性能的工具平台。 SkyWal…

装饰SpringMVC的适配器实现响应自动包装

文章目录 1.common-tool-starter1.目录结构2.ResultWrapper.java 2.common-web-starter1.目录结构2.IgnoredResultWrapper.java 自定义注解&#xff0c;忽略对返回结果的自动包装3.ReturnValueHandlersDecorator.java 对适配器进行扩展的装饰器4.WebAutoConfiguration.java 将装…

参照和谐色调为PPT图形设置统一格式的要点

大家好&#xff5e;今天和大家聊一聊PPT设计中如何通过和谐色调为图形设置统一格式&#xff0c;让整体设计看起来既专业又有视觉吸引力。PPT不仅仅是一个展示工具&#xff0c;它更是传达信息的载体。无论是公司汇报、学术展示&#xff0c;还是产品推广&#xff0c;一个有条理、…

React 低代码项目:项目创建

Date: January 29, 2025 项目创建 思路&#xff1a; 使用 Create-React-App 创建 React 项目使用 Vite 创建 React 项目使用 eslint prettier husty 等&#xff0c;制定编码规则 创建项目 注&#xff1a;在这之前&#xff0c;推荐 node 版本&#xff1a;node/18.20.6 &#…