网站开发员工结构,seo深度优化公司,深圳住房和建设局网站,佛山外贸网站建设机构2. Vue 基本工作原理
2.1 Virtual DOM
概念#xff1a; DOM: DOM以内存中树状数据结构的形式#xff0c;代表了网页上的HTML#xff08;或XML#xff09;文档内容。它充当了一个编程接口#xff0c;将网页与实际的编程代码#xff08;如JavaScript#xff09;连接起来…2. Vue 基本工作原理
2.1 Virtual DOM
概念 DOM: DOM以内存中树状数据结构的形式代表了网页上的HTML或XML文档内容。它充当了一个编程接口将网页与实际的编程代码如JavaScript连接起来。Virtual DOM 是浏览器中实际 DOM 的内存虚拟副本但它更轻量且具有额外的功能。 Virtual DOM 工作原理 通过用户界面交互用户向Vue传达了他们希望元素达到的状态随后Vue触发虚拟DOM更新该元素所代表的对象节点至期望形态同时记录这些变更。最终Vue与实际DOM进行通信并据此对发生变化的节点执行精确更新。 5.Virtrual DOM vs DOM: DOM 是浏览器解析 HTML 后生成的树形结构节点是复杂的对象直接操作性能开销较大。Virtual DOM 是DOM 的轻量级副本用简单的 JavaScript 对象表示便于高效计算和更新。
2.2 Options API
概念 组件的配置是一个包含所有组件初始配置选项的对象。我们将此参数的结构称为Options API。vue2: 实例化
import { Vue } from vue
const App { //components options }
const app new Vue(App)
app.mount(#app)vue3 实例化
import { createApp } from vue
const App { //components options }
const appcreateApp(App)
app.mount(#app)接下来主要基于vue3 语法
2.3 模板语法
在 Options API中template接受一个包含有效基于HTML代码的单一字符串该字符串代表了组件的用户界面布局。Vue引擎会解析这一值并将其编译为优化的JavaScript代码随后相应地渲染出相关的DOM元素。对于多层次的HTML模板代码我们可以使用反引号字符JavaScript模板字面量以符号表示并保持代码的可读性。
import { createApp } from vue
const App { template: h1This is the apps entrance/h1 h2We are exploring template syntax/h2 ,
}
const app createApp(App)
app.mount(#app)
2.4 Vue 响应数据工作原理
data() 是一个返回表示组件本地数据状态的匿名函数。我们称这个返回的对象为数据对象。在初始化组件实例时Vue引擎会将这个数据对象的每个属性添加到其响应式系统中以便跟踪其变化并根据需要触发UI模板的重新渲染。工作原理
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。
3Vue使用队列系统来避免在短时间内对DOM进行低效的多次更新。当相关组件的数据发生变化时观察者会将自己添加到队列中。Vue引擎按照特定顺序对其进行排序以供消费。在Vue引擎完成消费并将该观察者从队列中清除之前无论数据发生多少次变化队列中只存在同一组件的一个观察者。
这一消费过程是通过nextTick() API完成的它是Vue的一个函数。
4最后在Vue引擎消费并清除所有观察者之后它会触发每个观察者的run()函数自动更新组件的实际DOM和虚拟DOM应用程序随即进行渲染。
