技术标签: 前端 vue.js javascript
Vue 3是一个流行的JavaScript框架Vue.js的最新版本,它已经在2020
年9月正式发布,是Vue.js的一个重要升级。
Vue 3相对于Vue 2在性能提高、组件系统的结构优化和响应式系统的全面更新方面都有了很大的改进,为前端开发者带来了更好的开发体验。
Vue 3的核心重构包括了响应式、虚拟DOM、组件自定义等方面的改进,旨在更好地提高开发人员的生产力和体验,并且也可以更好的满足大型企业应用程序的需求。
Vue3源码分析对于前端开发人员非常重要。以下是几个分析Vue3源码的原因:
Vue 3通过对响应式、虚拟DOM和组件自定义
等方面的重大改进,已经成为了一个新的框架,理解Vue3源码能够加深我们对Vue.js的认识和理解。
Vue 3相对于Vue 2来说,开发体验和性能都得到了提高。如果你深入理解Vue3的源码,那么你就有机会更好地利用Vue 3的优势,并且能够更加灵活地使用Vue 3来开发复杂的企业应用程序。
在我们开发过程中,总会遇到一些问题,对应困境,在源码分析方面就能找到很好的指引和解决方案。对源码理解深入之后还能够记录下开发过程中一些奇妙的技巧和方法,方便后续查看。
对于前端开发人员,能够分析Vue3源码是一个非常令人印象深刻和难度较大的技能。理解和扎实的源码分析技能,能够让别人更好地认同你的编程技能,让自己在开发岗位上更有价值。
总之,分析Vue3源码是非常有益的一项技能,能够帮助我们更好地理解Vue.js,更好地开发Vue应用程序,同时也可以向团队和招聘者展示我们的编程水平和能力。
以下是一些常用的工具和资源,供你去分析Vue3源码:
一款优秀的代码编辑器,支持Vue3的项目调试与开发。
Vue 3官网除了提供文档外,还有一份比较详细的Vue3源码解析,介绍整个Vue3源码的架构设计和关键特性。
Vue3源码仓库是在GitHub
上,通过查看源码可以帮助你理解Vue3
的实现原理。
在慕课网上,你可以找到很多关于Vue3
源码的课程,包括如何分析Vue3
源码,以及关于Vue3响应式系统、组件系统、异步组件、渲染、编译器等内容的源代码分析。
这是一个Github
项目,提供了Vue3
源码的阅读笔记和中文翻译,可以帮助你更好的理解Vue3源码。
这个博客涵盖了Vue3中的各个细节和理念,是一个非常完整的Vue3源码解析,很有参考价值。
总之,这些工具和资源都提供了非常可靠的Vue3源码分析方法和资料,有助于更好地理解Vue3的实现原理和应用场景。
Vue3架构可以简单分为以下几部分:
Vue3响应式系统重构了底层实现,更加高效和灵活。它使用了新的Reactivity API
,这个API基于了ES6的Proxy,可以用于跟踪JavaScript
对象和属性的变化。
Vue3中组件系统也有了很多的改进,包括了setup
函数、v-model
指令、Teleport
等。此外,在组件实例化过程中的代码生成和实例挂载过程中的逻辑也进行了调整和优化。
从Vue2
的渲染流程到Vue3
的渲染流程进行了更改,现在有了更清晰的调用顺序和可避免死循环的新特性。
Vue3编译器经过了重大的改进,允许更强大的编译去除和代码优化。
基于这样的分析脉络,我们可以选择开始深入研究Vue3的源码。具体步骤如下:
了解Vue3
源码的整体架构,并理解其中的模块和组件
重点关注Vue3
中重要的优化和改进,如响应式系统、组件系统和渲染等。
根据架构分析脉络展开Vue3
源码分析的过程,主要可以从以下几个方向展开:响应式系统、组件系统、编译器等。
阅读源码时,可以使用自己擅长的调试工具进行调试,然后在代码中添加注释,清晰地记录自己的解析过程和思考过程。
最后可以阅读代码贡献者和其他博客作者的研究成果和经验,以便更全面地理解Vue3
源码。
在理解Vue 3源码的过程中,需要耐心和持续的学习,不断调试和尝试,才能真正掌握Vue3的实现原理。
Vue 3 提供了一些全局 API ,以下是一些重要的全局 API:
createApp
(options) - 返回一个应用程序实例,用来创建和挂载根实例。
mount
(rootComponent, rootContainer, rootProps?) - 将应用程序挂载到指定的容器上。
unmount
(rootContainer) - 从指定的容器卸载应用程序。
defineAsyncComponent
(loader) - 定义异步组件。
defineComponent
(options) - 定义组件。
h(tag, propsOrChildren?, children?)
- 创建新的虚拟节点。
onBeforeMount(fn) / onMounted(fn) / onBeforeUpdate(fn) / onUpdated(fn) / onBeforeUnmount(fn) / onUnmounted(fn)
- 生命周期钩子函数。
provide
(key, value) / inject(key, defaultValue?) - 用于跨层级传递数据。
reactive
(raw) / shallowReactive(raw) / readonly(raw) / shallowReadonly(raw) - 用于创建相应式对象。
watchEffect
(effect) / watch(source, effect, options?) - 用于监听数据变化。
这些全局 API 是Vue3的重要组成部分,每个API都有自己的用途和特点。在深入研究 Vue3 源码和开发 Vue3 应用程序时,对这些全局 API 的理解和掌握非常重要。
在Vue3中,
实例属性和方法
主要包括以下内容:
$data:实例中数据的对象。
$props:从父组件传递下来的prop值的对象。
$attrs:非prop特性被添加到组件根元素的特性对象。
$emit:用于触发实例目标事件的函数。
$el:当前实例挂载的根元素。
$options:当前实例的初始化选项对象。
$refs:一个对象,其属性包含了组件模板中所有带有 ref 特性的元素。
$slots:一个对象,包含了所有传递给一个组件的插槽内容。
$children:当前实例的直接子组件。
$parent:当前组件的父实例对象。
在Vue3中,
实例方法
也有所改变,主要包括以下内容:
setup(props, context):组件初始化方法,返回响应式数据。
render(createElement):渲染函数,生成虚拟DOM。
$watch(): 观察数据变化的方法。
$on(event, callback):绑定事件监听函数。
$once(event,callback):只绑定一次的事件监听函数。
$off(event, callback):移除事件监听函数。
$nextTick(callback):在DOM更新完毕之后执行回调函数。
总之,实例属性和方法是Vue 3中非常重要的组成部分,Vue 3源码的开发和学习都需要重点关注这些属性和方法的实现原理和使用方法。
Vue 3 内部依赖的第三方库有很多,以下是一些主要的依赖:
@vue/reactivity:用于Vue 3响应式系统的实现。
@vue/compiler-core:Vue 3编译器内核的实现。
@vue/compiler-dom:Vue 3编译器的DOM部分的实现。
@vue/shared:Vue 3内部使用的一些通用工具函数和常量。
@vue/runtime-core:Vue 3运行时核心部分的实现。
@vue/runtime-dom:Vue 3运行时DOM部分的实现。
@vue/server-renderer:Vue 3服务端渲染部分的实现。
@babel/core:用于Vue 3编译器中的代码转换。
eslint:用于Vue 3开发中的代码检查。
TypeScript:Vue 3 开发中的类型安全检查。
除了上述依赖,Vue 3 还使用了很多其他的依赖库来帮助实现各种功能。这些内部依赖都是Vue 3源码中非常重要的组成部分,深入研究它们的实现原理和特性是Vue 3开发和源码分析的重要环节。
Vue3的响应式系统是基于ES6的 Proxy 实现的。
Object.defineProperty
实现,ES6
的 Proxy
对象,可以更简洁、优雅地实现数据的监听和触发逻辑。具体地说,当数据发生变化时,Vue3
通过Proxy
的setter
方法捕获变化,并通知对应的依赖进行更新。当数据被访问时,Vue3通过 Proxy
的 getter
方法来监听数据的变化,从而使数据变得响应式。
例如,当执行 obj.name = 'Vue 3'
修改一个响应式对象的属性值时,Vue3在底层是这样实现的:
Vue3内部会根据这个对象在WeakMap里找对应的dep对象发布事件;
dep对象会遍历自己的订阅列表,逐个通知其中的视图进行更新。
而在Vue2中,当执行 obj.name = 'Vue 2'
修改数据时,Vue2的响应式系统使用的是Object.defineProperty来实现的,需要为被监听的对象的每个属性添加 getter 和 setter 方法。
对比来说,Vue3 的响应式系统在语法上更加简洁、优雅,并且性能方面也有了很大的提升。
Proxy 和 Object.defineProperty 都是 JavaScript 中用于实现对象属性监听的机制,下面是它们的优缺点比较:
1. 功能:
Proxy 相比 Object.defineProperty 功能更加强大, Proxy
可以拦截对象更多的操作,包括访问、赋值、删除等操作,而 defineProperty
可以用来监听对象的 get/set 操作。
2. 语法:
使用 Proxy 时,不再需要为对象的每个属性添加 getter
和 setter
方法,而是直接使用 Proxy 的 get 和 set 方法完成属性监听。
3. 性能:
Proxy 由于是 JavaScript 内置的机制,相比 Object.defineProperty
在性能方面有很大的提升,特别是在处理大量数据时,Proxy 的性能更加优异。
4. 兼容性:
Proxy 是 ECMAScript 6 中的新功能,相比 Object.defineProperty
在浏览器兼容性方面较差,如果需要支持到旧版浏览器,需要使用 Polyfill。
5. 应用:
Proxy 适用于监听对象的整个属性,并提供了更丰富的拦截方法;而 defineProperty
更多用于监听对象的 get/set 操作,适合用于单个属性的监听和改变。
总的来说, Proxy 和 Object.defineProperty 都有各自的优点和适用场景,视具体问题而定。但总体而言,Proxy 相对于 Object.defineProperty 的优势更多,是未来在 Vue 和 React 等框架中广泛应用的趋势之一。
依赖收集和派发更新是 Vue 3 响应式系统中非常重要的两个概念,能够有效地优化性能。
当一个响应式变量被访问时,Vue 3 会通过当前的渲染上下文,自动进行依赖收集,将当前的响应式变量与对应的渲染函数形成关联,称作一个 effect。
例如,在模板中调用了 {
{name}}
,渲染函数中使用到了一个响应式变量name
,这个变量与对应的渲染函数形成了依赖关系。
当某个响应式变量发生变化时,Vue 3 会通过追踪依赖关系的方式,自动将与之相关的所有依赖关系一并更新,称为派发更新。这部分涉及 Vue 3 内部的 reactivity 模块,它会触发 effect 重新执行,并重新生成 vnode 和 patch 以实现视图更新。
例如,当 name
的值发生变化时,Vue 3 会派发更新,通知所有依赖 name
的 effect 重新执行,生成新的 vnode 执行 patch 更新视图。
通过依赖收集,在合适的时间触发派发更新,可以提高视图更新的效率和性能,减少无谓的视图更新。Vue 3 的响应式系统利用Proxy对象实现依赖收集和更新派发机制,从而实现了更快的数据响应速度和更好的性能表现。
在 Vue 3 中,组件的生命周期分为设置阶段(Setup)、渲染阶段(Render)、更新阶段(Update)和卸载阶段(Unmount)四个阶段。下面是具体的生命周期函数:
beforeCreate
: 在实例初始化之后,数据观测和初始化事件之前调用。setup
: 新增生命周期函数,组件实例化过程中被调用的函数,其返回结果将供模板使用,setup 函数可以返回一个普通对象、函数、或是即是对象又是函数的对象(如 ref、reactive 等)。onBeforeMount
: 挂载开始之前调用,即将开始渲染模板。onMounted
: 挂载完成后调用,此时可获得真实 DOM。onBeforeUpdate
: 组件更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。在这个钩子中,可以访问更新之前的 DOM,此时还未更新。onUpdated
: 组件更新之后调用,发生在 DOM 重新渲染和打补丁之后。onBeforeUnmount
: 卸载之前调用,可以在这里进行一些清理工作。onUnmounted
: 卸载完成后调用,此时组件实例已经被完全销毁,可以进行一些其他的清理工作。总体来说,Vue 3 的生命周期钩子和 Vue 2 是基本相同的,但做了一些改进,其中新增了 setup
函数,可以更灵活地管理组件状态。另外,也有些生命周期函数的名称及作用会有所变化,需要注意区别。
在 Vue 3 中,组件的渲染过程流程如下:
初始化渲染:当 Vue 3 创建一个组件实例时,Vue 3 会先对该组件进行初始化,并创建出其对应的 vnode。此时 Vue 3 将调用组件实例的 Setup 函数,来收集组件所需的响应式数据以及重新渲染组件所需的一些依赖关系。
模板编译:Vue 3 将会对组件的模板进行编译,将其转换为 VNode,并整理出 VNode 的父子关系。
虚拟 DOM 的生成:在此步骤中,Vue 3 将使用 VNode 即生成的虚拟 DOM 进行渲染,并将其插入到真实 DOM 中。
数据的更新:当组件内的数据发生变化时,Vue 3 将重复执行第二步至第四步的流程,生成新的 VNode,并将其与之前的 VNode 进行对比。
DOM 的更新:在上一步中,当新旧虚拟节点进行比对后,Vue 3 将会根据比对结果执行相应的 DOM 操作
卸载流程:在组件卸载时,Vue 3 将从 DOM 中移除该组件,并进行一些相关的清理工作。
在 Vue 3 的渲染过程中,整个过程都是响应式的,也就是说,在响应式数据发生变化时,Vue 3 会自动重新渲染组件,这就是 Vue 3 状态响应式的核心机制。同时,Vue 3 的编译过程都是在运行时进行的,既可以使用 Vue 3 的模板语法,也可以直接使用 JavaScript 进行编写,使得 Vue 3 的渲染逻辑更加灵活。
VNode 是 Vue 3 中的一个核心概念,它是一个关于视图层的抽象对象,包含了组件的层次结构和组件内部的状态信息。而 diff 算法是指在更新视图时,对比新旧 VNode 树,最小化地更改 DOM 树的算法,从而实现高效的视图更新。
在 Vue 3 中,当需要更新视图时,Vue 3 会通过对比新旧 VNode 树的差异,来确定需要哪些 DOM 操作,从而尽可能减少对 DOM 的操作,提高更新性能。
具体过程如下:
1. 对比 VNode:
Vue 3 会对新旧 VNode 树进行逐层对比,如果发现某个节点内容发生变化,或者子节点发生变化,就标记该节点需要更新。
2. 标记需要更新的节点:
对于标记为需要更新的节点,Vue 3 会将其放入队列中,标记为需要更新。
3. 执行更新:
Vue 3 会在下一次更新周期中,优先更新队列中的节点,从而完成对该节点的更新操作,这个过程中,Vue 3 使用了一些优化手段,以尽可能减少对 DOM 的操作,从而实现高效的视图更新。
需要注意的是,虽然 diff 算法可以有效地减少 DOM 的操作,但是在组件层级较深或者需要进行复杂计算时,仍然会影响页面性能,因此在开发时也需要谨慎优化。同时,对于静态节点尽量使用静态节点,可以通过开启 compileStatic 选项来把组件不需要改变的节点编译为静态节点,提升组件的性能。
在 Vue 3 中,异步组件是指在组件渲染时,只有在需要时才会被加载的组件。
异步组件的加载可以通过 import
函数来实现懒加载,从而提高应用的性能。使用异步组件时,需要将其定义为一个返回 Promise
的函数,该函数执行后返回组件对象。
例如:
const AsyncComponent = () => import('./AsyncComponent.vue')
另外,在 Vue 3 中,还引入了 Suspense
组件来解决异步组件加载时,产生的卡顿或是白屏问题。Suspense
组件可以在异步组件加载完成前,指定一个占位符组件,并在异步组件加载完成后,显示真正的组件。这样,可以在页面加载过程中避免出现卡顿或是白屏的现象,提高用户体验。
使用 Suspense 组件时,需要在模板中添加一个 组件,在其中包含一个或多个异步组件,并指定一个 fallback 组件作为占位符。示例如下:
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
需要注意的是,由于 Suspense 组件时 Vue 3 新引入的组件,因此在 Vue 2 中不支持。同时,使用异步组件和 Suspense 组件时也需要尽可能的避免触发过多的异步加载,避免影响页面性能。
在 Vue 3 中,模板解析和编译是 Vue 3 的核心功能之一,它们负责将模板转化为可执行的渲染函数,实现组件的渲染。
具体来说,模板解析和编译通过以下步骤来实现:
1. 解析模板:
Vue 3 会对模板进行解析,分析其中的 HTML 代码、指令以及用户自定义标签,并生成对应的 AST(抽象语法树)格式。
2. 生成渲染函数:
根据解析后的 AST,Vue 3 会对模板进行编译,生成可执行的渲染函数。在渲染函数中,Vue 3 会将模板中的数据绑定、计算属性和自定义指令等一系列特性编译为可执行的 JavaScript 代码,并通过生成闭包的方式实现了局部作用域,从而提高性能。
3. 生成 VNode:
在执行渲染函数时,Vue 3 会根据组件的状态信息,生成对应的 VNode(虚拟节点)树,这个 VNode 树中包含了组件的层次结构和组件内部数据以及指令等信息。
4. 插入到 DOM 树中:
最后,Vue 3 会将生成的 VNode 树和之前生成的旧的 VNode 树进行对比,并根据差异来决定 when 和 where 如何进行具体的 DOM 操作,最终将 VNode 树渲染到页面上。
需要注意的是,Vue 3 中的模板解析和编译都是在运行时进行的。这意味着 Vue 3 可以支持类似于 JSX 的模板语法,开发者可以将其视为模板那样编写,但实际上 Vue 3 会在运行时将其转化为可执行的 JavaScript 代码,从而实现高效的视图更新。同时,Vue 3 还引入了 compileStatic 选项,可以将组件的静态内容转换成静态节点,从而减少渲染时的重复计算和操作,从而提高组件的性能。
AST,全称是抽象语法树(Abstract Syntax Tree),是一种表示源代码抽象语法结构的树状结构。在 Vue 3 中,AST 被用于解析和编译模板,将模板转化为可执行的渲染函数。
在 Vue 3 中,模板首先会被解析成原始的 HTML 代码,包含了一些标签、属性和文本等内容。然后,Vue 3 会将这些原始的 HTML 代码,转换成 AST 树的形式,通过 AST 树可以表示出模板中各个元素的关系及作用,如父子关系,属性节点,文本节点等等。Vue 3 会在进行模板解析后,根据生成的 AST 树,利用编译器将其转换成可执行的 JavaScript 代码。这个过程中,Vue 3 会遍历 AST 树来寻找需要编译的部分,将其编译成原生 JavaScript 代码。
AST 有着广泛的应用,不仅仅是在 Vue 3 的模板解析和编译中使用。在前端开发中,很多工具和框架都会用到 AST 来实现相关功能,如 eslint、babel 等。AST 可以用于分析和优化代码的工具、代码的生成器和转换器等,可以大大提高代码的可维护性和开发效率。
需要注意的是,使用 AST 也需要注意它的性能,AST 节点过多或深度过大时,会导致解析速度变慢,影响应用性能。因此,开发者应该尽量避免出现过于复杂的 AST 树,从而提高应用的性能。
在 Vue 3 中,优化和静态提升是两种优化技术,用于提高组件的性能和减少重复渲染的次数。
1. 优化
优化是指在组件应用中,通过一些手段减少组件重新渲染的次数的技术。例如在使用 computed
属性的时候,只有当计算所依赖的数据发生变化时,才会进行重新计算和渲染视图,从而避免不必要的渲染。另外,Vue 3 还提供了 shouldUpdate 和 memo 方法,可以手动控制组件的重绘渲染,提高组件的性能。
2. 静态提升
静态提升是指在组件渲染时,把内部可能会执行多次的部分缓存起来,从而减少不必要的渲染次数。例如,在一个包含大量重复静态节点的组件中,可以使用 h() 函数把静态节点转换为 VNode 节点,从而避免不必要的重复渲染,提高组件的性能。
在 Vue 3 中,静态提升可以通过 compileStatic 选项来实现。compileStatic 选项可以将组件的静态内容转换成静态节点,并缓存起来,从而减少渲染时的重复计算和操作。开发者可以通过在模板中添加静态节点,使渲染时的计算量变小,从而提高应用的性能。
需要注意的是,在使用静态提升时,要避免将动态节点变为静态节点,否则会导致组件渲染不正常。同时,要尽可能地减少代码中的重复节点,从而提高静态提升的效果。
在 Vue 3
中,插槽是一种将父组件中的内容传递到子组件中进行渲染的技术。
插槽功能可以让开发者在父组件中定义一些内容,然后将这些内容传递到子组件中进行渲染,从而实现更加灵活的组件设计。
在 Vue 3 中,可以使用 <slot>
和 v-slot
指令来定义和使用插槽。
以下是使用插槽的基本步骤:
1. 在父组件中,使用 <slot>
标签定义插槽。可以通过 name
属性来给插槽命名。
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
2. 在子组件中,使用 v-slot
指令来引用父组件中定义的插槽。可以使用 v-slot 的简写语法 # ,并通过 slot 属性来引用对应的插槽。
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<template>
<BaseLayout>
<template #header>
<h1>Welcome</h1>
</template>
<template>
<p>Hello, Vue 3!</p>
</template>
<template #footer>
<p>Have a nice day!</p>
</template>
</BaseLayout>
</template>
需要注意的是,在 Vue 3
中,通过 v-slot
可以使用插槽的具名和默认语法,而在 Vue 2 中仅支持具名插槽。
Vue 3
的插槽功能可以大大提高组件的灵活性,使得父组件可以更加自由地向子组件中传递数据和内容。
在 Vue 3 中,自定义指令和过滤器是扩展 Vue 的功能的重要手段。
1. 自定义指令
自定义指令是指在 Vue 中,开发者可以根据需要自定义一些指令,在模板中使用指令来操作 DOM 结构和渲染视图。自定义指令可以实现一些非常有用的功能,例如自动聚焦、限制输入的字符等。在 Vue 3 中,可以使用 directive() 函数来定义和注册指令。
以下是定义一个自动聚焦的指令:
export default {
mounted(el) {
el.focus()
}
}
// 注册指令
app.directive('focus', FocusDirective)
在模板中使用:
<template>
<input v-focus>
</template>
2. 过滤器
过滤器是指在 Vue 中,过滤和格式化显示数据的通用功能。开发者可以定义一些自定义过滤器,来满足不同的数据格式化需求。在 Vue 3 中,可以使用 filter() 函数来定义和注册过滤器。
以下是定义一个格式化日期的过滤器:
import {
formatDate } from '@/utils'
export default {
/* 使用 value 作为过滤器函数的第一个参数 */
filter(value) {
return formatDate(value, 'yyyy-MM-dd')
}
}
// 注册过滤器
app.filter('dateFormat', DateFormatFilter)
在模板中使用:
<template>
<div>{
{ date | dateFormat }}</div>
</template>
需要注意的是,在 Vue 3 中,过滤器的使用和指令类似,须在模板中调用,但是过滤器不支持在 template中使用函数,而指令可以支持在 template中使用函数。
在 Vue 3 中,Mixins
是一种复用组件选项的方式。Mixins
可以让开发者在多个组件之间共享某些组件选项的代码,从而提高组件的复用性和代码的可维护性。
Mixins
可以定义在单独的对象中,这个对象会被多个组件引用。当组件使用了 Mixins
,这些 Mixins
中的选项会被混合到组件中,从而实现组件选项的复用。
以下是 Mixin 的使用示例:
const myMixin = {
data() {
return {
active: false
}
},
methods: {
toggleActive() {
this.active = !this.active;
}
},
created() {
console.log('Mixin created!')
}
}
export default {
mixins: [myMixin],
mounted() {
this.toggleActive();
}
}
在组件中使用 mixins 属性来引用 Mixin,可以使用数组的形式来引用多个 Mixin。
需要注意的是,在多个 Mixin 中如果存在冲突的选项时,Vue 3 中优先级更高的选项会覆盖优先级低的选项。冲突的选项包括 data、methods、hooks 等。此外,组件内的选项优先级会更高于 Mixin 中的选项。开发者在使用 Mixin 时,应当注意优先级的问题,并尽量避免冲突。
在 Vue 3 中,Provide/Inject
是一种跨层级组件通信的方式。Provide
和 Inject
可以让开发者在父组件中提供数据,然后子孙组件通过 Inject 从父组件中获取数据,从而实现组件之间的数据共享。
1. Provide
Provide 是在父组件中提供数据给子孙组件使用的方法。Provide 可以在 provides 选项中进行定义和注册,然后在父组件的模板中使用相关数据。
以下是 Provide 的使用示例:
const app = createApp({
provide: {
title: 'Vue 3'
},
template: `
<div>
<h1>{
{ title }}</h1>
<child></child>
</div>
`
})
2. Inject
Inject 是在子孙组件中获取提供给它的数据的方法。它可以在 inject 选项中进行注册,然后在子孙组件中通过 this.$injected 来使用。
以下是 Inject 的使用示例:
const Child = {
inject: ['title'],
template: `
<div>
<h2>{
{ title }}</h2>
</div>
`
}
在以上示例中,父组件通过 Provide 提供了 title 数据,然后子组件通过 Inject 注入获取了该数据并在模板中使用。
需要注意的是,Provide/Inject 是一种高级的使用方式,应当在合适的场景下使用。在使用 Provide/Inject 时,要注意传递数据的类型和命名,保证代码的可维护性和扩展性。
在 Vue 3 中,使用 vue-cli 工具可以方便地进行项目的打包和构建。
1. 打包
打包是将项目中的各个模块和资源打包成一个或多个文件以便于部署和使用的过程。在 Vue 3 中,可以使用 vue-cli 工具中的 build 命令进行打包。
vue-cli 提供了多个模板和配置文件可以用于不同的应用场景。使用默认模板时,打包生成的文件都存放在 dist 目录下。
以下是使用 vue-cli 进行打包的命令:
vue-cli-service build
2. 构建
构建是指将原始的代码转换为可以直接运行在浏览器中的代码的过程。在 Vue 3 中,构建过程是自动化的,开发者不需要手动进行太多的操作,只需要进行一些简单的配置即可。
Vue 3 中的构建工具使用了现代化的打包工具,如 Webpack,Rollup,Parcel
等。这些工具可以将原始的代码打包成可执行的、优化过的代码,提高了应用程序的性能和稳定性。
在构建时,Vue 3 中会对应用程序进行代码压缩、混淆、分割等优化操作,从而减小应用的体积并提高应用的执行效率。
在 Vue 3 中,构建的相关配置选项包括 outputDir
、publicPath
、chainWebpack
、configureWebpack
等,可以通过配置文件进行设置和调整。
需要注意的是,打包和构建是项目开发中必不可少的环节,但是打包和构建的结果往往跟代码的实现期望有所差异,开发者需要进行相关的测试和优化工作,确保应用程序的稳定性和用户体验。
在 Vue 3 的学习过程中,我们需要掌握如下重点:
文章浏览阅读391次。你需要明白的java基础知识之一(变量)_静态局部变量 pub
文章浏览阅读5.9k次。插值算法python实现_插值查找代码
文章浏览阅读759次,点赞25次,收藏21次。1.背景介绍人类思维和人工智能(AI)的推理能力始终是人工智能领域的热门话题。人类思维具有弹性和创造力,能够解决复杂的问题,而 AI 则试图通过模拟人类思维来实现类似的推理能力。在过去的几年里,人工智能技术已经取得了显著的进展,但是在某些领域仍然存在挑战。在本文中,我们将探讨人类思维与 AI 推理能力之间的关系,以及如何通过深入了解人类思维来提高 AI 的推理能力。2.核心概念与联系2...
前文介绍了EasyDarwin的基本使用流媒体服务器EasyDarwin-CSDN博客文章浏览阅读146次。前文:为何要使用流媒体服务器_多终端访问监控要上流媒体服务器吗-CSDN博客我们知道,监控摄像机的工作原理就是将自然界的光影,通过摄像机镜头对焦到“靶芯”(CMOS),实现了光(信号)到电(信号)的转换,然后摄像机图像处理器将模拟信号转为数字信号,通常编码为H.264或更好的H.265的MP4格式,通过网络向后端(存储、NVR、终端)提供视频流。发出后发现录像存储部分没有介绍,本文补上。
文章浏览阅读5.6k次,点赞7次,收藏62次。前言编译内核是一项很简单的事情,但却是进入Linux内核世界的第一步,想要开发内核代码,想要了解内核的运行机制,第一步就是编译Linux内核,以下是在centos7.5环境下编译内核的具体流程。1、下载内核内核的源码的官方网站为The Linux Kernel Archives,在此网站下载最新内核源码。2、解压内核源码[root@rt7_node03 src]# tar xvf linux-5.16.14.tar.xz -C /usr/src/[root@rt7_node03 sr_centos编译内核
文章浏览阅读245次。ZC:这个例子是使用TCP来交互midbus协议数据,我在这个例子里面没有查找到 dll或so文件,运行过程中也没有提示需要dll或so文件 也没有说缺少函数之类的,应该是 没有用到dll或so文件的。ZC:这是使用 TCP的方式来传输 modbus协议数据包的,想追一下源码 看看到底是不是 socket,追到 ModbusMaster.class的 调用函数sendImpl(......_batchread batch = new batchread<>();
文章浏览阅读513次。1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度字符串 strlen(p) 取字符串长度 strcmp(p, p1) 比较字符串 strcasecmp忽略大小写比较字符串strncmp(p, p1, n) 比较指定长_复制指定长度字符串
文章浏览阅读1.4w次。宝塔想必大家一定很熟悉了,用过服务器的都知道。那今天给大家介绍下宝塔的防火墙。宝塔面板网站防火墙是基于nginx/apache模块开发的一套应用层防火墙,能有效阻止大部分渗透攻击,且提供高度自由的规则自定义功能,为站点加一道铜墙铁壁。主要目的是从源头阻止站点被挂马的事情发生。目前宝塔官网和官方论坛一直都在使用宝塔网站防火墙,效果良好。宝塔面板防火墙是一个防火墙程序,用于在宝塔面板中防御服务器外来攻击使用的。根据环境服务软件的不同,分为nginx防火墙和apache防火墙。宝塔面板防火墙其实管理的是操_宝塔系统防火墙是什么防护
文章浏览阅读349次,点赞4次,收藏8次。随着网络技术的不断进步和社会节奏的加快,越来越多的单身人士倾向于通过在线渠道来结识新朋友或寻找潜在的伴侣,这一现象推动了网上约会网站的迅猛发展。本项目将采用HTML、CSS、JavaScript、Vue等前端技术结合Node.js、Express等后端技术,以及MySQL数据库,通过VSCode和Navicat等开发工具,构建一个功能完善、操作简便的网上约会网站,旨在为现代单身人士提供一个优质的交友平台。此外,强大的网上约会网站还能促进社会交往方式的创新,推动经济增长,提升社会整体的社交网络水平。
文章浏览阅读2.1k次。在Ubuntu系统中,/usr目录是一个重要的目录,它包含了系统的用户程序和数据。这只是一些常见的文件夹,实际上还有更多的文件夹和子目录。比较重要的有/etc,存放系统配置,proc我对虚拟文件系统不太了解,/usr下各目录的解释。_ubuntu opt目录
文章浏览阅读479次,点赞10次,收藏8次。第一点题目分析完后我们得到:地图是n * m 的有湖泊L(当且只有它的周围8个方向都是湖泊L的时候种荷花S)山脉M (不种任何东西)青草块G 1.周围没有房屋H,有湖泊L,种水仙N 2.周围没有房屋H,没有湖泊L,种苍月草N房屋H (不种任何东西,且周围不能种花)第二点那么我们可以定义四个变量 L,M,G,H 来统计当前这个点周围有哪些这个点自己是湖泊,且周围湖泊L== 8 的话,种荷花S这个点是青草块 1、周围房屋H == 0 且有_2024天梯模拟赛
文章浏览阅读2.9k次,点赞12次,收藏29次。1、小区管理2、居民信息管理3、工作人员管理4、停车位管理5、小区安全管理6、门禁管理7、居民收费信息管理:固定类费用缴纳(根据条件查询,显示某住户的基本信息),小区中的居民会有一些相关的物业费信息,管理员可以对这些信息进行管理操作。8、居民付费信息管理:小区居民需要对自己要缴纳的费用进行提交,管理员则可以对这些交易记录进行管理工作,可以对其进行添加、删除、修改操作。9、保修管理:用户对自己要保修的部位进行在线保修.然后管理员在后台对提交的信息进行管理操作。10、业主投诉管理_管理员,用户登录流程图