Vue.js 3：面向未来的编程

如果你对 Vue.js 感兴趣，那很可能知道这个框架的第 3 个版本即将发布（如果你在未来读这篇文章，我希望本文还具有意义）。这个新版本正在积极开发中，但是所有可能的功能都可以在单独的 RFC（request for comments，即意见征求）处查看： https://github.com/vuejs/rfcs 。其中一项特性 function-api ，将极大地改变开发 Vue 应用程序的方式。

本文主要面向具有基本的 JavaScript 和 Vue 背景知识的人。

开篇之前：使用 Bit 来 封装 Vue 组件 以及它们的依赖和配置。通过更好的代码复用、更简单的维护和更少的开销来构建真正的模块应用。（译者注，这里是对 Bit 平台的推广）

当前的 API 有什么问题？

最好的方法是在一个例子中展示所有问题。因此，我们可以想象，我们需要实现一个组件，这个组件应该获取某个用户的数据并根据滚动偏移显示加载状态和顶栏。下面是最终结果：

你还可以点击 链接 查看在线演示。

跨组件抽取一些逻辑进行复用是一种好习惯。使用 Vue 2.x 版本的当前 API，有许多常见的模式，最著名的是：

• Mixins（通过 mixins 选项）
• 高阶组件（HOC）

因此，我们可以将滚动跟踪逻辑转移到一个 mixin，并将数据获取逻辑转移到一个高阶组件。典型的 Vue 实现如下。

滚动 mixin：

 复制代码

constscrollMixin = {
data() {
return{
pageOffset:0
}
},
mounted() {
window.addEventListener('scroll',this.update)
},
destroyed() {
window.removeEventListener('scroll',this.update)
},
methods: {
update() {
this.pageOffset = window.pageYOffset
}
}
}

其中，我们增加了 scroll 事件监听，跟踪页面偏移并将值保存到 pageOffset 属性。

高阶组件如下：

 复制代码

import{ fetchUserPosts } from'@/api'

constwithPostsHOC = WrappedComponent => ({
props: WrappedComponent.props,
data() {
return{
postsIsLoading:false,
fetchedPosts: []
}
},
watch: {
id: {
handler:'fetchPosts',
immediate:true
}
},
methods: {
async fetchPosts() {
this.postsIsLoading =true
this.fetchedPosts = await fetchUserPosts(this.id)
this.postsIsLoading =false
}
},
computed: {
postsCount() {
returnthis.fetchedPosts.length
}
},
render(h) {
returnh(WrappedComponent, {
props: {
...this.$props,
isLoading:this.postsIsLoading,
posts:this.fetchedPosts,
count:this.postsCount
}
})
}
})

其中， isLoading 、 posts 分别针对加载状态和发布数据进行初始化。为了获取新 id 的数据， fetchPosts 方法会在创建实例和 props.id 每次变化之后触发。

这并不是一个完整的高阶组件实现，但是针对这个例子，已经足够了。这里，我们只是包装了目标组件并传递原始属性以及数据请求相关的属性。

目标组件如下：

 复制代码

// ...

exportdefault{
name:'PostsPage',
mixins: [scrollMixin],
props: {
id:Number,
isLoading:Boolean,
posts:Array,
count:Number
}
}

// ...

为了获取指定 props，应该把它包装在创建的高阶组件中：

 复制代码

constPostsPage=withPostsHOC(PostsPage)

包含模版和样式的完整组件 链接在此 。

1. 命名空间冲突

假设我们需要在我们的组件中增加 update 方法：

 复制代码

// ...

exportdefault{
name:'PostsPage',
mixins: [scrollMixin],
props: {
id:Number,
isLoading:Boolean,
posts:Array,
count:Number
},
methods: {
update() {
console.log('some update logic here')
}
}
}

// ...

如果你重新打开页面并滚动，顶栏不会再显示。这都是由于 mixin 的 update 方法的重写。这对于高阶组件也适用。如果你将数据域从 fetchedPosts 改为 posts ：

 复制代码

constwithPostsHOC =WrappedComponent=>({
props: WrappedComponent.props,// ['posts', ...]
data() {
return{
postsIsLoading:false,
posts: []// fetchedPosts -> posts
}
},
// ...

你将会得到如下报错：

报错的原因是封装组件已经用名字 posts 指定了组件。

2. 来源不明

如果一段时间之后，你决定在组件中使用另一个 mixin：

 复制代码

// ...

exportdefault{
name:'PostsPage',
mixins: [scrollMixin, mouseMixin],
// ...

你能明确说明 pageOffset 属性来自哪个 mixin 吗？或者换个场景，两个 mixin 都可以有一个同名属性（比如说 yOffset ），后一个 mixin 的属性将覆盖前一个 mixin 的属性。这并不好，并且会导致许多不可预见的代码缺陷。

3. 性能

高阶组件的问题是，我们需要仅仅因为逻辑复用而牺牲性能去创建单独的组件实例。

让我们来“setup”

让我们来看看下个 Vue.js 版本将提供什么可选方案，以及我们将如何适用基于函数的 API 解决同样的问题。

由于 Vue 3 还没有发布，所以创建了辅助插件—— vue-function-api 。这个插件提供 Vue 3.x 到 Vue 2.x 的版本的函数 API，用于创建下一代 Vue 应用程序。

首先，你需要进行安装：

 复制代码

$ npminstallvue-function-api

然后通过 Vue.use() 进行显式设置：

 复制代码

importVuefrom'vue'
import{ plugin }from'vue-function-api'

Vue.use(plugin)

基于函数的 API 主要新增了一个新的组件选项—— setup() 。顾名思义，这里是我们使用新的 API 的功能来设置我们的组件逻辑的地方。因此，让我们实现一个功能来根据滚动偏移显示顶栏，基本组件示例如下：

 复制代码

// ...

exportdefault{
setup(props) {
constpageOffset =0
return{
pageOffset
}
}
}

// ...

注意， setup 函数接收解析过的 props 对象作为它的首个参数，而且这个 props 对象是响应式的。我们也返回了一个包含 pageOffset 属性的对象来暴露给模版的渲染上下文。这个属性也变成响应式的，但是只关于渲染上下文。我们可以像往常一样在模版中使用它：

 复制代码

 120 }">...

// ...

import{ value, onMounted, onUnmounted }from'vue-function-api'
exportdefault{
setup(props) {
constpageOffset = value(0)
constupdate =()=>{
pageOffset.value =window.pageYOffset
}

onMounted(()=>window.addEventListener('scroll', update))
onUnmounted(()=>window.removeEventListener('scroll', update))

return{
pageOffset
}
}
}

// ...

// ...

import{
value,
watch,
computed,
onMounted,
onUnmounted
}from'vue-function-api'
import{ fetchUserPosts }from'@/api'
exportdefault{
setup(props) {
constpageOffset = value(0)
constisLoading = value(false)
constposts = value([])
constcount = computed(()=>posts.value.length)
constupdate =()=>{
pageOffset.value =window.pageYOffset
}

onMounted(()=>window.addEventListener('scroll', update))
onUnmounted(()=>window.removeEventListener('scroll', update))

watch(
()=>props.id,
asyncid => {
isLoading.value =true
posts.value =awaitfetchUserPosts(id)
isLoading.value =false
}
)

return{
isLoading,
pageOffset,
posts,
count
}
}
}

// ...

// ...

import{
value,
watch,
computed,
onMounted,
onUnmounted
}from'vue-function-api'
import{ fetchUserPosts }from'@/api'
functionuseScroll(){
constpageOffset = value(0)
constupdate =()=>{
pageOffset.value =window.pageYOffset
}
onMounted(()=>window.addEventListener('scroll', update))
onUnmounted(()=>window.removeEventListener('scroll', update))
return{ pageOffset }
}
functionuseFetchPosts(props){
constisLoading = value(false)
constposts = value([])
watch(
()=>props.id,
asyncid => {
isLoading.value =true
posts.value =awaitfetchUserPosts(id)
isLoading.value =false
}
)
return{ isLoading, posts }
}
exportdefault{
props: {
id:Number
},
setup(props) {
const{ isLoading, posts } = useFetchPosts(props)
constcount = computed(()=>posts.value.length)
return{
...useScroll(),
isLoading,
posts,
count
}
}
}

// ...