混合

基础

混合(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以避免产生重复应用

自定义选项合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向Vue.config.optionMergeStrategies添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

对于大多数对象选项，可以使用methods的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

更多高级的例子可以在 Vuex 的 1.x 混合策略里找到:

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)
  }
}

自定义指令

简介

除了默认设置的核心指令(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属性：

<input 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来进行

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

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
<script>
  Vue.directive('demo', {
    bind: function (el, binding, vnode) {
      var s = JSON.stringify
      el.innerHTML =
        'name: '       + s(binding.name) + '<br>' +
        'value: '      + s(binding.value) + '<br>' +
        'expression: ' + s(binding.expression) + '<br>' +
        'argument: '   + s(binding.arg) + '<br>' +
        'modifiers: '  + s(binding.modifiers) + '<br>' +
        'vnode keys: ' + Object.keys(vnode).join(', ')
    }
  })
  new Vue({
    el: '#hook-arguments-example',
    data: {
      message: 'hello!'
    }
  })
</script>

函数简写

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

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

对象字面量

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

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
  Vue.directive('demo', function (el, binding) {
    console.log(binding.value.color) // => "white"
    console.log(binding.value.text)  // => "hello!"
  })
</script>

渲染函数 & JSX

基础

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

<h1>
  <a name="hello-world" href="#hello-world"> Hello world! </a>
</h1>

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

<anchored-heading :level="1">Hello world!</anchored-heading>

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

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1"> <slot></slot> </h1>
  <h2 v-else-if="level === 2"> <slot></slot> </h2>
  <h3 v-else-if="level === 3"> <slot></slot> </h3>
  <h4 v-else-if="level === 4"> <slot></slot> </h4>
  <h5 v-else-if="level === 5"> <slot></slot> </h5>
  <h6 v-else-if="level === 6"> <slot></slot> </h6>  
</script>
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为例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

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

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

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

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

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<VNode> }
  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')
    })
  )
}

使用js代替模板功能

v-if和v-for

由于使用原生的JavaScript来实现某些东西很简单，Vue的render函数没有提供专用的API。比如，template中的v-if和v-for：

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

这些都会在render函数中被JavaScript的if/else和map重写：

render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

v-model

render函数中没有与v-model相应的api - 你必须自己来实现相应的逻辑：

render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.value = event.target.value
        self.$emit('input', event.target.value)
      }
    }
  })
}

这就是深入底层要付出的，尽管麻烦了一些，但相对于v-model来说，你可以更灵活地控制

事件&按键修饰符

对于.passive、.capture和.once事件修饰符, Vue提供了相应的前缀可以用于on：

Modifier(s)	Prefix
.passive	&
.capture	!
.once	~
.capture.once or .once.capture	~!

例如：

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  `~!mouseover`: this.doThisOnceInCapturingMode
}

对于其他的修饰符，前缀不是很重要，因为你可以直接在事件处理函数中使用事件方法：

Modifier(s)	Equivalent in Handler
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
Keys:.enter,.13	if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers)
Modifiers Keys:.ctrl,.alt,.shift,.meta	if (!event.ctrlKey) return (change ctrlKey to altKey, shiftKey, or metaKey, respectively)

这里是一个使用所有修饰符的例子：

on: {
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是enter键或者没有同时按下shift键则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }
}

插槽

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

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

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

render: function (createElement) {
  // `<div><slot :text="msg"></slot></div>`
  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<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

JSX

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

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

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

<anchored-heading :level="1">
  <span>Hello</span> world!
</anchored-heading>

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

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

将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
  }
})

slots()和childre对比

你可能想知道为什么同时需要slots()和children。slots().default不是和children类似的吗？但是如果是函数式组件和下面这样的children呢？

<my-functional-component>
  <p slot="foo"> first </p>
  <p>second</p>
</my-functional-component>

对于这个组件，children会给你两个段落标签，而slots().default只会传递第二个匿名段落标签，slots().foo会传递第一个具名段落标签。同时拥有children和slots()，因此你可以选择让组件通过slot() 系统分发或者简单的通过children接收，让其他组件去处理

模板编译

你可能有兴趣知道，Vue的模板实际是编译成了render函数。这是一个实现细节，通常不需要关心，但如果你想看看模板的功能是怎样被编译的，下面是一个使用Vue.compile来实时编译模板字符串的简单demo：

<div>
  <header> <h1>I'm a template!</h1> </header>
  <p v-if="message"> {{ message }} </p>
  <p v-else> No message. </p>
</div>

render：

function anonymous() {
  with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}

staticRenderFns:

_m(0): function anonymous() {
  with(this){return _c('header',[_c('h1',[_v("I'm a template!")])])}
}

插件

开发插件

1.添加全局方法或者属性，如:vue-custom-element

2.添加全局资源：指令/过滤器/过渡等，如vue-touch

3.通过全局mixin方法添加一些组件选项，如:vue-router

4.添加Vue实例方法，通过把它们添加到Vue.prototype上实现。

5.一个库，提供自己的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表达式的尾部，由“管道”符指示：

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数总接收表达式的值(之前的操作链的结果)作为第一个参数。在这个例子中，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的可复用性和组合

混合

基础