小米的博客html源代码,小米前端技术博客

如你所料，Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是，Vue 团队主要介绍了对当前 API 的添加和改进，而不是重大更改，所以已经了解 Vue 2 的人们应该很快就会对新语法感到满意。

Let’s start with the API that most of you probably heard about…

让我们从大多数人可能听说过的API开始…

组件 API(Composition API)

组件 API 是 Vue 的下一个主要版本中最常用的讨论和特色语法。这是一种全新的逻辑重用和代码组织方法。

当前，我们使用所谓的 Options API 构建组件。为了向 Vue 组件添加逻辑，我们填充(可选)属性，例如 data、methods、computed等。这种方法的最大缺点是其本身并不是有效的 JavaScript 代码。你需要确切地知道模板中可以访问哪些属性以及 this 关键字的行为。在后台，Vue 编译器需要将此属性转换为工作代码。因此我们无法从自动建议或类型检查中受益。

组件 API 旨在通过将组件属性中当前可用的机制公开为 JavaScript 函数来解决这个问题。 Vue 核心团队将组件 API 描述为 “一组基于函数的附加 API，可以灵活地组合组件逻辑。” 用组件 API 编写的代码更具有可读性，并且其背后没有任何魔力，因此更易于阅读和学习。

让我们通过一个用了新的组件 API 的组件的简单示例，来了解其工作原理。

Count is: {{ count }}, double is {{ double }}, click to increment.

import { ref, computed, onMounted } from 'vue'

export default {

setup() {

const count = ref(0)

const double = computed(() => count.value * 2)

function increment() {

count.value++

}

onMounted(() => console.log('component mounted!'))

return {

count,

double,

increment

}

}

}

现在，让我们把代码分解为几部分，来了解发生了些什么：

import { ref, computed, onMounted } from 'vue'