你必学的Vue.js的进阶教程

语言: CN / TW / HK

点击关注“八戒技术团队”,阅读更多技术干货

Vue.js 以其简单易用的特点而被广泛使用, 本篇文章将会重点介绍在 Vue.js 应用中的一些 API 使用方法和使用场景,希望能给你带来一些帮助。

vm.$root 的使用

$root 是 vm 的一个属性,指向当前 Vue 组件树的根组件,通过 $root 属性,我们可以获取根组件上挂载的属性或者方法。 面通过两个例子来具体说明。

例子 1 : SSR 端数据请求的实现

在 Vue 的应用中,我们需要方便地使用 axios 的 API,在每个 Vue 的组件中,能够通过 vm.$axios 方便地使用 axios 库进行数据的请求。相信这个问题大家都不陌生,一行代码就可以解决了,在 Vue 的原型上挂载一个 $axios 的属性。

这行代码已经可以很好地满足我们的需求了,但是在 SSR 渲染时却不能正常运行。 因为在 SSR 的渲染过程中,axios 的代码是运行在 Server 端,Node 端的 axios 发起请求时,已经没有本次浏览器端请求过来的 header 信息,特别是 cookie 相关的数据,将会导致登录验证等接口校验的失败。

这种情况下,$root 就可以派上用场了,我们可以基于浏览器端的 header 信息去初始化一个 axios实例,并将其挂在到本次 SSR的根组件上,这样所有的子组件就都可以通过 $root 使用了。更进一步,我们可以基于 defineProperty 来实现 vm.$axios 的调用。

例子 2: 动态化加载子组件

在 SSR 的应用中,所有的代码都被打包到 Server bundle 和 Client bundle 中,在普通的应用这不是一个问题,但对于需要动态加载远端第三方组件的场景来说,就无法实现了,因为 Server Render 没有提供相关的接口,当然我们可以把动态化的组件一股脑全部挂载到 Vue 的全局 components 中去,但这并不是一个比较好的解决办法。

在这个场景下,我们可以使用 $root 来解决这个问题。 看一段简单的代码。

我们将动态加载的组件注册在 SSR 端的根组件上,在具体的组件中,我们可以通过访问 $root 获取到具体 component 引用,动态地注册这个组件。

vm.$scopedSlots

基于 scopedSlots 我们可以实现强大的组件复用能力, scopedSlots 可以在 template 模版或者 render 函数中使用。 scopedSlots 提供默认的显示内容,当调用者没有初始化这个插槽时,将会使用默认的内容来渲染,默认的内容其实就是返回的一个 VNode 节点。

下面显示一个 scopedSlot 默认内容的 render 函数定义:

该 render 函数对应的 template 模版为

scopedSlots 的例子,基于 scopeSlots 实现一个声明式的数据获取组件。在这个例子中,我们基于 scopeSlots 实现了一个声明式组件,提供了 loader, allLoaded, 数据渲染的插槽。

使用也很简单

scopedSlots 提供了在父组件中使用子组件数据的能力,基于此我们可以实现行为和展现的分离。子组件进行统一的行为处理(如数据获取等),在父组件中依赖子组件的数据和行为,进行差异化的 UI 展现或交互处理。

vm.$listeners

vm.$props

vm.$scopedSlots

$listeners 和 $props 是专为实现高阶组件而存在的,通过这两个属性,我们可以很容易地在 Vue 里实现高阶组件。

render 函数

大部分情况下 render 函数都可以使用 template 来替代,但是有一种情况下,我们必须使用 render 函数,那就是当你什么都不渲染的时候。 这常常发生在我们需要自定义渲染情况下,比如我们需要把数据通过 canvas 来进行渲染,这个时候 Vue 默认的渲染器就不是必须的了,但是 Vue 的组件里又必须有渲染相关的定义,这时我们可以通过 render 函数返回一个空值来实现,在 created 或者 mounted 等生命周期函数中处理我们的自定义渲染逻辑。

基于自定义的 render,我们可以实现类似声明式的 canvas 组件,形如以下的定义。

结语

针对 Vue.js 的进阶的用法就介绍到这里,如果你有其他想要了解的,欢迎留言。

希望以上内容能对有需要的人有所帮助

欢迎大家一起探讨交流

请点击下方名片关注我们