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

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

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

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

• Mixins（通过 mixins 选项）

• 高阶组件（HOC）

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

滚动 mixin：

const scrollMixin = {

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'

 

const withPostsHOC = 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() {

return this.fetchedPosts.length

}

},

render(h) {

return h(WrappedComponent, {

props: {

...this.$props,

isLoading: this.postsIsLoading,

posts: this.fetchedPosts,

count: this.postsCount

}

})

}

})

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

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

目标组件如下：

// ...



// ...

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

const PostsPage = withPostsHOC(PostsPage)