对vue的研究

​​beforeDestroy​​

• 类型：​​Function​​
• 详细：
  实例销毁之前调用。在这一步，实例仍然完全可用。
  该钩子在服务器端渲染期间不被调用。
• 参考：​​生命周期图示​​

​​destroyed​​

• 类型：​​Function​​
• 详细：
  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  该钩子在服务器端渲染期间不被调用。
• 参考：​​生命周期图示​​

​​errorCaptured​​

2.5.0+ 新增

• 类型：​​(err: Error, vm: Component, info: string) => ?boolean​​
• 详细：
  当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 ​​false​​ 以阻止该错误继续向上传播。
  你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
  错误传播规则

• 默认情况下，如果全局的 ​​config.errorHandler​​ 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
• 如果一个组件的继承或父级从属链路中存在多个 ​​errorCaptured​​ 钩子，则它们将会被相同的错误逐个唤起。
• 如果此 ​​errorCaptured​​ 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 ​​config.errorHandler​​。
• 一个 ​​errorCaptured​​ 钩子能够返回 ​​false​​ 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 ​​errorCaptured​​ 钩子和全局的 ​​config.errorHandler​​。

​​选项 / 资源​​

​​directives​​

• 类型：​​Object​​
• 详细：

包含 Vue 实例可用指令的哈希表。

• 参考：​​自定义指令​​

​​filters​​

• 类型：​​Object​​
• 详细：

包含 Vue 实例可用过滤器的哈希表。

• 参考：​​Vue.filter​​

​​components​​

• 类型：​​Object​​
• 详细：

包含 Vue 实例可用组件的哈希表。

• 参考：​​组件​​

​​选项 / 组合​​

​​parent​​

• 类型：​​Vue instance​​
• 详细：
  指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 ​​this.$parent​​访问父实例，子实例被推入父实例的 ​​$children​​ 数组中。
  节制地使用 ​​$parent​​ 和 ​​$children​​ - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

​​mixins​​

• 类型：​​Array<Object>​​
• 详细：
  ​​​mixins​​​ 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 ​​Vue.extend()​​ 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。
  Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
• 示例：

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

• 参考：​​混入​​

​​extends​​

• 类型：​​Object | Function​​
• 详细：
  允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 ​​Vue.extend​​。这主要是为了便于扩展单文件组件。
  这和 ​​mixins​​ 类似。
• 示例：

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

​​provide / inject​​

2.2.0 新增

• 类型：

• provide：​​Object | () => Object​​
• inject：​​Array<string> | { [key: string]: string | Symbol | Object }​​

• 详细：
  ​​provide​​​ 和 ​​inject​​ 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
  这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。
  ​​provide​​​ 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 ​​Symbol​​ 和 ​​Reflect.ownKeys​​ 的环境下可工作。
  ​​inject​​ 选项应该是：

• 一个字符串数组，或
• 一个对象，对象的 key 是本地的绑定名，value 是：

• 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
• 一个对象，该对象的：

• ​​from​​ 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
• ​​default​​ 属性是降级情况下使用的 value

提示：​​provide​​​ 和 ​​inject​​ 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

• 示例：

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

利用 ES2015 Symbols、函数 ​​provide​​​ 和对象 ​​inject​​：

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 ​​props​​​ 和 ​​data​​ 初始化之后得到。

使用一个注入的值作为一个属性的默认值：

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

使用一个注入的值作为数据入口：

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

如果它需要从一个不同名字的属性注入，则使用 ​​from​​ 来表示其源属性：

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

​​选项 / 其它​​

​​name​​

• 类型：​​string​​
• 限制：只有作为组件选项时起作用。
• 详细：
  允许组件模板递归地调用自身。注意，组件在全局用 ​​​Vue.component()​​​ 注册时，全局 ID 自动作为组件的 name。
  指定 ​​​name​​​ 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 ​​vue-devtools​​​，未命名组件将显示成 ​​<AnonymousComponent>​​​，这很没有语义。通过提供 ​​name​​ 选项，可以获得更有语义信息的组件树。

​​delimiters​​

• 类型：​​Array<string>​​
• 默认值：​​["{{", "}}"]​​
• 限制：这个选项只在完整构建版本中的浏览器内编译时可用。
• 详细：
  改变纯文本插入分隔符。
• 示例：

new Vue({
  delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

​​functional​​

• 类型：​​boolean​​
• 详细：
  使组件无状态 (没有 ​​​data​​​ ) 和无实例 (没有 ​​this​​​ 上下文)。他们用一个简单的 ​​render​​函数返回虚拟节点使他们更容易渲染。
• 参考：​​函数式组件​​

​​model​​

2.2.0 新增

• 类型：​​{ prop?: string, event?: string }​​
• 详细：
  允许一个自定义组件在使用 ​​​v-model​​​ 时定制 prop 和 event。默认情况下，一个组件上的 ​​v-model​​​ 会把 ​​value​​​ 用作 prop 且把 ​​input​​​ 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 ​​value​​​ prop 来达到不同的目的。使用 ​​model​​ 选项可以回避这些情况产生的冲突。
• Example：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于：

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

​​inheritAttrs​​

2.4.0 新增

• 类型：​​boolean​​
• 默认值：​​true​​
• 详细：
  默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 ​​​inheritAttrs​​​ 到 ​​false​​​，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 ​​$attrs​​​ 可以让这些特性生效，且可以通过 ​​v-bind​​​ 显性的绑定到非根元素上。
  注意：这个选项不影响 ​​​class​​​ 和 ​​style​​ 绑定。

​​comments​​

2.4.0 新增

• 类型：​​boolean​​
• 默认值：​​false​​
• 限制：这个选项只在完整构建版本中的浏览器内编译时可用。
• 详细：
  当设为 ​​​true​​ 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。