Vue组件简介

heavysnake 发布于2年前
0 条问题

Vue组件简介

如果过去的几年你一直在从事JavaScript的开发工作, 那你必然使用过某种MVC/MVVM框架,例如:Angular, Ember, React, Vue 等 其它框架 。 在过去几年中,从“全能框架”(如Angular、Ember)到更加灵活的模块化框架(React及最近的Vue)已经有了明显的转变.

我们最近在Morningstar评估了Vue,发现它非常适合我们的组件化开发需求。以下是我们喜欢Vue组件的一些地方:

Vue规范化的生命周期钩子

当大量开发者都在使用可重用的组件时,标准化的组件接口是必需的。你的团队可以在Vue生命周期钩子所提供的良好基础接口上进行开发。 所有钩子自动绑定到实例,以便您可以访问钩子函数内的任何数据或方法:

  • beforeCreate— 在实例初始化之后, watchers/events配置之前被调用

  • created— 实例已经创建完成之后被调用, 计算属性, 数据的watchers/events已完成配置,但组件还未挂载至DOM的el元素

  • beforeMount— 在挂载开始之前被调用

  • mounted— 在实例挂载后调用,DOM中的el被你的组件所替换.

  • beforeUpdate— 在数据更新时,虚拟DOM更新前调用

  • updated— DOM更新后调用

  • beforeDestroy— 在实例即将被销毁之前调用,但实例的完整功能仍然可用

  • destroy— 实例销毁后调用

更多API文档见Vue官网

简单和复杂组件的数据及状态管理

Vue采用一种数据向下传递/事件向上传递的架构。 数据通过 prop 属性单向流动, 通过 events 向上进行通信。

使用单向数据流可以阻止在子组件中意外发生的突变,因为数据不会被发送回父级,并且在父级的下一次更新中,子组件中的数据将再次被父级的数据覆盖。

Vue组件简介

Vue还对数据进行了限制。组件必须特别声明它接受的props,并忽略任何其他的内容。 为了更加灵活, Props 可以声明为必选或可选 。 最后,验证prop时可以声明 prop的数据类型 。 Vue在创建实例之前会验证所有的prop并会对无效的props抛出警告.

同样的原则也可以应用在非父子关系的组件。与React类似,Vue组件可以从一个单一可靠来源(数据存储)中检索数据。这个数据存储可以执行相同的功能,而不是让父容器传递数据和接收事件。该解决方案可以从0开始实现,也可以使用推荐的 Vuex 库。

通过插槽抽象进行定制

通常客户们需要一些只适用于他们使用场景的小调整或额外的功能。却可能会给组件库增加不必要的复杂性,或者导致相同组件的多个变体,这对于一个可维护性的项目来说简直就是噩梦。 Vue使用slots(插槽)很好的解决了这个问题. 顾名思义, slots就是你组件布局内各式各样内容的占位符。

让我们来看一个实例更好地解释插槽如何工作。假设我们有一个popover组件,根据不同的内容有不同的布局配置。我们可以利用插槽进行抽象,来实现所有的差异而不是为每个布局创建不同的popover组件。

<div class="popover">
  <header>
    <slot name="header"></slot>
  </header>
  <slot name="content">
    <p> This is the default content in case nothing is passed in </p>
  </slot>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

然后,根据使用popover的父组件,您可以实现popover的个性化定制

// Tooltip popover no header/footer
<popover>
    <p slot="content"> Some message </p>
</popover>

// Form Popover 
<popover>
    <h1 slot="header">
      This is a form
    </h1>
    <ul slot="content">
      <li><input type="text" /></li>
      <li><input type="text" /></li>
    </ul>
    <p slot="footer">
      <input type="submit" />
    </p>
</popover>

// Menu Popover 
<popover>
    <h1 slot="header">
      My Menu
    </h1>
    <ul slot="content">
      <li>Option 1</li>
      <li>Option 2</li>
    </ul>
</popover>

Slots通常不需要name属性,但是对于复杂的布局来说还是建议使用命名过的slots

可重用的mixins

在构建组件库时,你可能会开始注意到各种组件之间有重复的功能。Vue允许你将这个功能提取到可混入到多个组件中的mixin中来提升可重用性。

Mixins是一些包含任意组件选项的简单对象。你可以定义钩子函数,方法,属性等等并确保它们将与组件特定的选项正确合并。如果你的mixn定义的对象值与组件自身的冲突了,在合并时组件自身的值有更高的优先级。然而, 如果你的mixin为相同的生命周期事件提供了同一个钩子函数, 那么钩子函数都会执行,但是mixin中的钩子将会先调用。更多选项合并的信息可以在这里找到 Vue 文档官网

Mixins甚至可以设置在全局上,并应用于页面上的所有Vue组件。像污染JavaScript的全局作用域一样,这些全局的mixins将影响页面上的任何组件(包括第三方组件)。使用时风险自负。

前瞻性

如果问Angular从1.5到2.0版本的巨大转变教会了我们什么,那就是要时刻关注未来并采取措施去适应。组件化开发的黄金准则(希望如此)就是web组件标准化。现在你仍然需要polyfills确保在每一个浏览器都正常工作,但是使用Vue组件能使你的开发团队在以后轻松地适应这些标准。

单文件Vue组件遵循了web组件标准,它允许你把模板/javascript/样式放在一个文件里同时脑子仍然可以理清各种关系。 看看 Polymer实现的web组件 (译注:Polymer是google在2013年发布的JS框架)并将其与下面Vue实现的组件进行比较

<template>
  <div>My Name is {{name}} !</div>
</template>

<script>
  module.exports = {
    data: () => ({
      name: 'John Doe'
    })
  }
</script>

<style scoped>
  div {
    font-size: 1em;
  }
</style>

Vue的slots组合也是按照Web组件推荐的构建方式构建的,它允许嵌套自定义的子元素: https://www.webcomponents.org/specs#composition-and-slots

最后,Vue和Web组件都具有 生命周期事件 ,让你使用钩子函数正确管理组件。

下一步?

我们打算分享更多从Vue组件的工作中学到的东西。后续计划发布的文章包括:

  • Vue组件测试策略

  • 组件的异步加载

  • 使用 monorepo strategy 构建你的组件库

查看原文: Vue组件简介

  • biggoose
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。