Vue组件的可复用性

从接触angularjs1.x开始，使用并开发过很多组件和指令，它能极大的扩展web的业务处理能力，而且代码很简洁优雅，同样的，使用vue脚手架开发时也要注意提取相应的组件和指令便于复用，下面介绍一些复用的技巧。

混合

混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例如：

var myMixin = { // 定义一个混合对象
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
var Component = Vue.extend({ // 定义一个使用混合对象的组件
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

选项合并
当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的钩子将在组件自身钩子之前调用：

var mixin = {
  created: function () {
    console.log('混合对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

值为对象的选项，例如methods, components和directives，将被混合为同一个对象。两个对象键名冲突时取组件对象的键值对

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}
var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

注意：Vue.extend()也使用同样的策略进行合并
全局混合
也可以全局注册混合对象。注意使用！一旦使用全局混合对象，将会影响到所有之后创建的Vue实例。使用恰当时可以为自定义对象注入处理逻辑

Vue.mixin({ // 为自定义选项 'myOption' 注入一个处理器
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
}) // => "hello!"

谨慎使用全局混合对象，因为会影响到每个单独创建的Vue实例（包括第三方模板）。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作Plugins以避免产生重复应用

自定义指令

除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。注意：在Vue2.0里，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令，例如聚焦一个input元素。页面加载时，元素将获得焦点(注意：autofocus在移动版Safari上不工作)。事实上，访问后还没点击任何内容input就获得了焦点。现在让我们完善这个指令：

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function(toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}

也可以注册局部指令，组件中接受一个directives的选项：

directives: {
  focus: {
    // 指令的定义---
  }
}

然后你可以在模板中任何元素上使用新的v-focus属性：

钩子函数
指令定义函数提供了几个钩子函数（可选）：

1.bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

2.inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）

3.update: 所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

4.componentUpdated: 所在组件的VNode及其孩子的VNode全部更新时调用

5.unbind: 只调用一次，指令与元素解绑时调用

接下来我们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode)

钩子函数参数
钩子函数被赋予了以下参数：

el: 指令所绑定的元素，可以用来直接操作DOM

binding: 一个对象，包含以下属性：

1.name: 指令名，不包括v-前缀。

2.value: 指令的绑定值，例如：v-my-directive="1+1", value的值是2

3.oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用

4.expression: 绑定值的字符串形式。例如v-my-directive="1+1" ， expression的值是"1+1"

5.arg: 传给指令的参数。例如v-my-directive:foo，arg的值是"foo"

6.modifiers: 一个包含修饰符的对象。例如v-my-directive.foo.bar,修饰符对象modifiers的值是{foo:true, bar:true}

7.vnode: Vue编译生成的虚拟节点，查阅VNode API了解更多详情

8.oldVnode: 上一个虚拟节点，仅在update和componentUpdated 子中可用

除el外，其它参数都应是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的dataset来进行

一个使用了这些参数的自定义钩子样例：

函数简写
大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量
如果指令需要多个值，可以传入一个JS对象字面量。记住：指令函数能够接受所有合法类型的JavaScript表达式

渲染函数 & JSX

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程的能力，这就是render函数，它比template更接近编译器


   Hello world!

在 HTML 层，我们决定这样定义组件接口：

Hello world!

当我们开始写一个通过level prop动态生成heading标签的组件，你可能很快想到这样实现：


Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

在这种场景中使用template并不是最好的选择：首先代码冗长，为了在不同级别的标题中插入锚点元素，我们需要重复地使用。虽然模板在大多数组件中都非常好用，但在这里就不是很简洁的了。那么，我们来尝试使用render函数重写上面的例子：

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

这样代码精简很多，但是需要非常熟悉Vue的实例属性。在这个例子中，你需要知道当你不使用slot属性向组件中传递内容时，比如anchored-heading中的Hello world!，这些子元素被存储在组件实例中的$slots.default中

节点、树以及虚拟DOM
在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段HTML为例：


  My title
  Some text content

浏览器读到这些代码时，会建立一个“DOM节点”树来保持追踪，如同画一张家谱树来追踪家庭成员的发展一样

每个元素都是一个节点。每片文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)

高效的更新所有这些节点会是比较困难的，不过你不必再手动完成这个工作了。只需要告诉Vue希望页面上的HTML是什么，这可以是在一个模板里：

{{ blogTitle }}

或者一个渲染函数里：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

两种情况下，Vue都会自动保持页面的更新，即便blogTitle发生了改变

虚拟DOM

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪。请近距离看一下这行代码：

return createElement('h1', this.blogTitle)

createElement到底会返回什么呢？其实不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription，因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点及其子节点。我们把这样的节点描述为“虚拟节点(Virtual DOM)”，也常简写它为“VNode”。“虚拟DOM”是我们对由Vue组件树建立起来的整个VNode树的称呼

createElement参数
接下来你需要熟悉的是如何在createElement函数中生成模板
深入data对象
正如在模板语法中，v-bind:class和v-bind:style会被特别对待一样，在VNode数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的HTML特性，就像DOM属性一样，比如innerHTML(这会取代v-html指令)

{
  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`，所以不再支持如 `v-on:keyup.enter` 修饰器，需要手动匹配keyCode
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用 `vm.$emit` 触发的事件
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意事项：不能对绑定的旧值设值；Vue会为您持续追踪
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

完整示例
有了这些知识，我们现在可以完成我们最开始想实现的组件：

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children ? getChildrenTextContent(node.children) : node.text
  }).join('')
}
Vue.component('anchored-heading', {
  render: function (createElement) {
    var headingId = getChildrenTextContent(this.$slots.default).toLowerCase().replace(/\W+/g, '-').replace(/(^\-|\-$)/g, '')
    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

约束
VNodes必须唯一:组件树中的所有VNodes必须是唯一的。这意味着，下面的render function是无效的：

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误-重复的 VNodes
    myParagraphVNode, myParagraphVNode
  ])
}

如果真的需要重复很多次的元素/组件，可以使用工厂函数来实现。例如，下面这个例子render函数完美有效地渲染了20个重复的段落：

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

插槽

你可以从this.$slots获取VNodes列表中的静态内容：

render: function (createElement) {
  // ``
  return createElement('div', this.$slots.default)
}

还可以从this.$scopedSlots中获得能用作函数的作用域插槽，这个函数返回VNodes：

render: function (createElement) {
  // ``
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.msg
    })
  ])
}

如果要用渲染函数向子组件中传递作用域插槽，可以利用VNode数据中的scopedSlots域：

render (createElement) {
  return createElement('div', [
    createElement('child', {
      // pass `scopedSlots` in the data object
      // in the form of { name: props => VNode | Array }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

JSX

如果写了很多render函数，可能会觉得痛苦：

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

特别是模板如此简单的情况下：


  Hello world!

这就是为什么会有一个Babel插件，用于在Vue中使用JSX语法的原因，它可以让我们回到更接近于模板的语法上

import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
  el: '#demo',
  render (h) {
    return (
      
        Hello world!
      
    )
  }
})

将h作为createElement的别名是Vue生态系统中的一个通用惯例，实际上也是JSX所要求的，如果在作用域中h失去作用，在应用中会触发报错

函数式组件

之前创建的锚点标题组件比较简单，没有管理或监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。在这个例子中，我们标记组件为functional，这意味它是无状态(没有data)，无实例(没有this上下文)。一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // 为了弥补缺少的实例，提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  },
  // Props 可选
  props: {
    // ...
  }
})

注意：在2.3.0之前的版本中，如果一个函数式组件想要接受props，则props选项是必须的。在2.3.0或以上的版本中，可以省略props选项，所有组件上的属性都会被自动解析为props

组件需要的一切都是通过上下文传递，包括：

props：提供props的对象
children: VNode子节点的数组
slots: slots对象
data：传递给组件的data对象
parent：对父组件的引用
listeners: (2.3.0+)一个包含了组件上所注册的v-on侦听器的对象。这只是一个指向data.on的别名。
injections: (2.3.0+)如果使用了 inject 选项，则该对象包含了应当被注入的属性。

在添加functional: true之后，锚点标题组件的render函数之间简单更新增加context参数，this.$slots.default更新为context.children，之后this.level更新为context.props.level

因为函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在Vue devtools的组件树里。在作为包装组件时它们也同样非常有用，比如，当你需要做这些时：程序化地在多个组件中选择一个，在将children, props, data传递给子组件之前操作它们。

下面是一个依赖传入props的值的smart-list组件例子，它能代表更多具体的组件：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
  functional: true,
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items
      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList
      return UnorderedList
    }
    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  }
})

插件

开发插件

添加全局方法或者属性，如:vue-custom-element
添加全局资源：指令/过滤器/过渡等，如vue-touch
通过全局mixin方法添加一些组件选项，如:vue-router
添加Vue实例方法，通过把它们添加到Vue.prototype上实现。
一个库，提供自己的API，同时提供上面提到的一个或多个功能，如vue-router

Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

使用插件
通过全局方法Vue.use()使用插件：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也可以传入一个选项对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use会自动阻止注册相同插件多次，届时只会注册一次该插件

Vue.js官方提供的一些插件(例如vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。然而在例如CommonJS的模块环境中，你应该始终显式地调用Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

过滤器

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示：


{{ message | capitalize }}

过滤器函数总接收表达式的值(之前的操作链的结果)作为第一个参数。在这个例子中，capitalize过滤器函数将会收到message的值作为第一个参数

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联：

{{ message | filterA | filterB }}

filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。过滤器是JavaScript函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数，普通字符串'arg1'作为第二个参数，表达式arg2取值后的值作为第三个参数.

小结

以上统计了一些组件开发及复用的技巧，希望大家在开发时尽量提取可复用的组件和指令-_-

Vue组件的可复用性

混合

自定义指令

渲染函数 & JSX

Hello world!

My title

{{ blogTitle }}

虚拟DOM

插槽

JSX

函数式组件

插件

过滤器

小结

你可能感兴趣的:(Vue组件的可复用性)