对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 注释。默认行为是舍弃它们。