directives

用于自定义指令，主要用于原生的DOM操作，一般目的是简化高重复度或者复杂的操作指令

使用方法

1.全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

2.局部注册

组件中接受 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

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

<input v-focus>

钩子及其参数

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的更新时调用，
componentUpdated：指令所在组件及其子组件全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Mixin 混入

用于data、methods和钩子的复用

例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 一个使用混入对象的组件
Vue({
  mixins: [myMixin]
})

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

文档

extend 继承

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>

// 创建构造器
var myVue = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
const vm = new myVue().$mount('#mount-point')

注入

在多层级场景下，通过props实现多级通信过于麻烦，利用注入可以实现跨级的信息传递

// 父级组件提供 'foo'
<template>
  <div>
    <div>{{foo}}</div>
    <son></son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "parent",
  components: { Son },
  provide() {
    return {
      foo: this.foo
    };
  },
  data() {
    return {
      foo: "测试",
    };
  }，
  mounted() {
    console.log(this.foo)
  },
};
</script>

//子级组件，不接收
<template>
  <grandSon></grandSon>
</template>

<script>
import grandSon from "./grandSon";
export default {
  name: "son",
  components: { grandSon },
};
</script>

//孙级组件，接收foo
<template>
  <div>{{foo}}</div>
</template>

<script>
export default {
  name: "grandSon",
  inject: ["foo"],
  mounted() {
    console.log(this.foo)
  },
};
</script>

注意:inject传给provide的是复制的值而不是引用，不能跨级使用函数

Vue的高级构造选项