-
VUE3-45-状态管理
类 Flux 状态管理的官方实现
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。
为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。
vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试 (time travel debugging)。
React 的开发者请参考以下信息
如果你是来自 React...
2021-08-02 13:01:55 |
VUE
-
VUE3-44-路由
官方 Router
对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。
更多细节可以移步 vue-router 文档
从零开始简单的路由
如果你只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:
const NotFoundComponent = { template: '<p>Page not found<...
2021-08-02 13:01:55 |
VUE
-
VUE3-43-Mobile 移动端
介绍
虽然 Vue.js 本身并不支持移动应用开发,但是有很多解决方案可以用 Vue.js 创建原生 iOS 和 Android 应用。
混合应用开发
Capacitor
Capacitor 是一个来自 Ionic Team 的项目,通过提供跨多个平台运行的 API,开发者可以使用单个代码库构建原生 iOS、Android 和 PWA 应用。
资源
Capacitor + Vue...
2021-08-02 13:01:55 |
VUE
-
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