-
VUE3-42-TypeScript 支持
NPM 包中的官方声明
随着应用的增长,静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么 Vue 3 是用 TypeScript 编写的。
这意味着在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公民支持。
推荐配置
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",...
2021-08-02 13:01:55 |
VUE
-
VUE3-41-测试
介绍
当构建可靠的应用时,测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多,它们在 web 应用这个领域里主要有三大类:
单元测试
组件测试
端到端 (E2E,end-to-end) 测试
本章节致力于引导大家了解测试的生态系统的并为 Vue 应用或组件库选择适合的工具。
...
2021-08-02 13:01:55 |
VUE
-
VUE3-40-单文件组件
介绍
在很多 Vue 项目中,我们使用 app.component 来定义全局组件,紧接着用 app.mount(‘#app’) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
全局定义 (Glo...
2021-08-02 13:01:55 |
VUE
-
VUE3-39-Vue 2 中的更改检测警告
由于 JavaScript 的限制,有些 Vue 无法检测的更改类型。
但是,有一些方法可以规避它们以维持响应性。
对于对象
Vue 无法检测到 property 的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程,因此必须在 data 对象中存在一个 property,以便 Vue 对其进行转换并使其具有响应式。
例如:
var vm = ne...
2021-08-02 13:01:55 |
VUE
-
VUE3-38-组合式 API 渲染机制和优化
虚拟 DOM
现在我们知道了侦听器是如何更新组件的,你可能会问这些更改最终是如何应用到 DOM 中的!
也许你以前听说过虚拟 DOM,包括 Vue 在内的许多框架都使用这种方式来确保我们的接口能够有效地反映我们在 JavaScript 中更新的更改
我们用 JavaScript 复制了一个名为 Virtual Dom 的 DOM,我们这样做是因为用 JavaScript 接触 DOM ...
2021-08-02 13:01:55 |
VUE
-
VUE3-37-组合式 API 模板引用
模板引用
在使用组合式 API 时,响应式引用和模板引用的概念是统一的。为了获得对模板内元素或组件实例的引用,我们可以像往常一样声明 ref 并从 setup() 返回:
<template>
<div ref="root">This is a root element</div>
</template>
<script>...
2021-08-02 13:01:55 |
VUE
-
VUE3-36-组合式 API 提供/注入
提供/注入
我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。
设想场景
假设我们要重写以下代码,其中包含一个 MyMap 组件,该组件使用组合式 API 为 MyMarker 组件提供用户的位置。
<!-- src/components/MyMap.vue -->
<template>
...
2021-08-02 13:01:55 |
VUE
-
VUE3-35-Setup
参数
使用 setup 函数时,它将接受两个参数:
props
context
让我们更深入地研究如何使用每个参数。
Props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样,setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新
// MyBook.vue
export default {
props: {
...
2021-08-02 13:01:55 |
VUE