VueAPI官方文档笔记

Vue API 官方文档

1. 全局配置、全局API：

1.1 全局配置（复制粘贴）

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性：

1.1.1 silent：取消 Vue 所有的日志与警告；

类型：boolean
默认值：false
用法：Vue.config.silent = true

意义：取消 Vue 所有的日志与警告。

1.1.2 optionMergeStrategies

类型：{ [key: string]: Function }
默认值：{}
用法：

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}
const Profile = Vue.extend({
  _my_option: 1
})
// Profile.options._my_option = 2

意义：自定义合并策略的选项。

合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数，Vue 实例上下文被作为第三个参数传入。

1.1.3 devtools：配置是否允许 vue-devtools 检查代码；

类型：boolean
默认值：true (生产版为 false)
用法：Vue.config.devtools = true // 务必在加载 Vue 之后，立即同步设置以下内容

意义：配置是否允许 vue-devtools检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

1.1.4 errorHandler：指定组件的渲染和观察期间未捕获错误的处理函数；

类型：Function
默认值：undefined
用法：

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

意义：指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。

1.1.5 warnHandler：为 Vue 的运行时警告赋予一个自定义处理函数（测试环境中）；

类型：Function
默认值：undefined
用法：Vue.config.warnHandler = function (msg, vm, trace) { // trace 是组件的继承关系追踪 }

意义：为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。

1.1.6 ignoredElements: 忽略Vue中定义的元素；

类型：Array<string | RegExp>
默认值：[]

用法：

Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // 用一个 `RegExp` 忽略所有“ion-”开头的元素
  // 仅在 2.5+ 支持
  /^ion-/
]

意义：须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。

1.1.7 keyCodes: 给 v-on 自定义键位别名；

类型：{ [key: string]: number | Array<number> }
默认值：{}
用法：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  // mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

<input type="text" @keyup.media-play-pause="method">

意义：给v-on 自定义键位别名；

1.1.8 performance

类型：boolean
默认值：false (自 2.2.3 起)
用法：

意义：设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上。

1.1.9 productionTip：设置为 false 后可以阻止 vue 在启动时生成生产提示。

类型：boolean
默认值：true
用法：

意义：设置为 false 以阻止 vue 在启动时生成生产提示。

1.2 全局 API

1.2.1 Vue.extend( options )：基础 Vue 构造器，可以创建一个“子类”；

参数：{Object} options
用法：

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

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

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

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

// 页面展示结果如下：
<p>Walter White aka Heisenberg</p>

1.2.2 Vue.nextTick( [callback, context] )：DOM 更新循环结束之后执行延迟回调；

参数：{Function} [callback] 或 {Object} [context]
用法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
示例：

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

1.2.3 Vue.set( target, key, value )：向响应式对象中添加一个属性；

参数：{Object | Array} target {string | number} key {any} value
返回值：设置的值。
用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’);

【注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。】

1.2.4 Vue.delete( target, key )：删除对象的属性；

参数：{Object | Array} target {string | number} key/index
用法：

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

1.2.5 Vue.directive( id, [definition] )：自定义全局指令；

参数：{string} id {Function | Object} [definition]
用法：

注册或获取全局指令。
示例：

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

1.2.6 Vue.filter( id, [definition] )：定义全局过滤器-过滤器；

参数：{string} id {Function} [definition]
用法：

注册或获取全局过滤器
示例：

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

1.2.7 Vue.component( id, [definition] )：定义全局组件-组件；

参数：{string} id {Function | Object} [definition]
用法：

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
示例：

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

1.2.8 Vue.use( plugin )：安装/注册 Vue.js 插件-插件；

参数：{Object | Function} plugin
用法：

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。
示例：

// 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  //... options
})

// 传入一个选项对象：
Vue.use(MyPlugin, { someOption: true })

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

1.2.9 Vue.mixin( mixin )：全局混入

参数：{Object} mixin
用法：

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
示例：

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

1.2.10 Vue.compile( template )：渲染函数

参数：{string} template
用法：

在 render 函数中编译模板字符串。只在独立构建时有效;
示例：

var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

1.2.11 Vue.version

细节：

提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略。

用法：

var version = Number(Vue.version.split('.')[0])
if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

2. 选项-`vm 实例对象中`（数据/DOM/生命周期钩子/资源/组合/其它）：

2.1 选项-数据

2.1.1 data：Vue 实例的数据对象；

类型：Object | Function
限制：组件的定义只接受 function。
详细：

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

以 _ 或 $ 开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象；
示例：

var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

【注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问：data: vm => ({ a: vm.myProp })】

2.1.2 props：用于接收来自父组件的数据；

类型：Array<string> | Object
详细：

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
示例：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

2.1.3 propsData: 创建实例时传递 props，主要作用是方便测试；

类型：{ [key: string]: any }
限制：只用于 new 创建的实例中
详细：

创建实例时传递 props。主要作用是方便测试。
示例：

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

2.1.4 computed：计算属性

类型：{ [key: string]: Function | { get: Function, set: Function } }
详细：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: { aDouble: vm => vm.a * 2 }

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

【计算属性 computed 一定要 return 一个值出去，区别于 watch】

2.1.5 methods：事件处理

类型：{ [key: string]: Function }
详细：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
示例：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

2.1.6 watch：监察属性/侦听器；

类型：{ [key: string]: string | Function | Object | Array }
详细：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue) )。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

2.2 选项-DOM

2.2.1 el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标；

生命周期图示

类型：string | HTMLElement
限制：只在由 new 创建的实例中遵守。
详细：

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到或者 上。

如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

2.2.2 template：作为 Vue 实例的标识使用，模板将会替换挂载的元素；

类型：string
详细：

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

如果 Vue 选项中包含渲染函数，该模板将被忽略。

用插槽分发内容

2.2.3 render: 渲染函数

类型：(createElement: () => VNode) => VNode
详细：

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

2.2.4 renderError(2.2.0 新增)：处理 render 函数遇到的错误；

类型：(createElement: () => VNode, error: Error) => VNode
详细：

只在开发者环境下工作。

当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。

示例：

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

2.3 选项-生命周期钩子

生命周期图示

2.3.1 beforeCreate：vm 实例对象初始化之后，data/methods… 初始化前；

类型：Function
详细：

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2.3.2 created：data/methods… 初始化完成，但是还没有进行挂载；

类型：Function
详细：

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

2.3.3 beforeMount：vm 实例挂载之前;

类型：Function
详细：

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

2.3.4 mounted：`el` 被新创建的 `vm.$el` 替换，并挂载到实例上去之后；

类型：Function
详细：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted;

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

该钩子在服务器端渲染期间不被调用

2.3.5 beforeUpdate：数据更新时调用，组件 `DOM` 更新之前，用于操作现有的DOM；

类型：Function
详细：

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

2.3.6 updated：数据更新时调用，虚拟 DOM 重新渲染，组件 `DOM` 已经更新；

类型：Function
详细：

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

该钩子在服务器端渲染期间不被调用。

2.3.7 activated

类型：Function
详细：

keep-alive 组件激活时调用。

keep-alive API 文档

 动态组件上使用 keep-alive

该钩子在服务器端渲染期间不被调用。

2.3.8 deactivated

类型：Function
详细：

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。

2.3.9 beforeDestroy：Vue 实例销毁前调用;

类型：Function
详细：

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

2.3.10 destroyed：Vue 实例销毁后调用;

类型：Function
详细：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

2.3.11 errorCaptured(2.5.0+ 新增)：捕获一个来自子孙组件的错误时被调用；

类型：(err: Error, vm: Component, info: string) => ?boolean
详细：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
错误传播规则:

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。

如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。

一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

2.4 选项-资源

2.4.1 directives：局部自定义指令

类型：Object
详细：

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

2.4.2 filters：局部自定义过滤器；

类型：Object
详细：

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

2.4.3 components：用于引入的组件进行注册；局部组件

类型：Object
详细：

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

(未学习)(5). 选项-组合

1. parent

2. mixins

3. extends

4. provide / inject

(未学习)(6). 选项-其它

1. name

2. delimiters

3. functional

4. model

5. inheritAttrs

6. comments

3. 实例-`通过 vm.$xxx 调用`(属性/方法-数据/方法-事件/方法-生命周期)：

3.1 实例属性

3.1.1 vm.$data：Vue 实例观察的数据对象；

类型：Object
详细：

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

3.1.2 vm.$props：当前组件接收到的 props 对象；

类型：Object
详细：

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

3.1.3 vm.$el：Vue 实例使用的根 DOM 元素；

类型：HTMLElement
该属性只读
详细：

Vue 实例使用的根 DOM 元素。

3.1.4 vm.$options：当前 Vue 实例的初始化选项（包含自定义属性）；

类型：Object
该属性只读
详细：

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

3.1.5 vm.$parent：当前实例的父实例；

类型：Vue instance
该属性只读
详细：

父实例，如果当前实例有的话。

3.1.6 vm.$root：当前组件树的根 Vue 实例；

类型：Vue instance
该属性只读
详细：

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

3.1.7 vm.$children：当前实例的直接子组件；

类型：Array<Vue instance>
该属性只读
详细：

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

3.1.8 vm.$slots：用来访问被插槽分发的内容；

类型：{ [name: string]: ?Array<VNode> }
该属性只读
详细：

用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。

在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。
示例：

<blog-post>
  <h1 slot="header">
    About Me
  </h1>
  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
  <p slot="footer">
    Copyright 2016 Evan You
  </p>
  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

3.1.9 vm.$scopedSlots(2.1.0 新增)：用来访问作用域插槽；

类型：{ [name: string]: props => VNode | Array<VNode> }
该属性只读
详细：

用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

3.1.10 vm.$refs：包含注册过 `ref` 特性的所有 `DOM` 元素和组件实例；ref 属性介绍

类型：Object
该属性只读
详细：

一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例。

3.1.11 vm.$isServer：当前 Vue 实例是否运行于服务器；

类型：boolean
该属性只读
详细：

当前 Vue 实例是否运行于服务器。

3.1.12 vm.$attrs

类型：boolean
该属性只读
详细：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

3.1.13 vm.$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器；

类型：{ [key: string]: Function | Array<Function> }
该属性只读
详细：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

3.2 实例方法-数据

3.2.1 vm.$watch( expOrFn, callback, [options] )：观察 Vue 实例变化的一个表达式或计算属性函数;

参数：

{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
· {boolean} deep
· {boolean} immediate

返回值：{Function} unwatch
用法：

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

示例：

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})
// 函数
vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

// vm.$watch 返回一个取消观察函数，用来停止触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调

3.2.2 vm.$set( target, key, value )：全局 Vue.set 的别名；

参数：{Object | Array} target {string | number} key {any} value
返回值：设置的值
用法：

这是全局 Vue.set 的别名。

3.2.3 vm.$delete( target, key )：全局 Vue.delete 的别名；

参数：{Object | Array} target {string | number} key
用法：

这是全局 Vue.delete 的别名。

3.3 实例方法-事件

3.3.1 vm.$on( event, callback )：监听当前实例上的自定义事件；

参数：

1 2	{string \| Array<string>} event (数组只在 2.2.0+ 中支持) {Function} callback

用法：

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

示例：

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

3.3.2 vm.$once( event, callback )：监听一个只触发一次的自定义事件；

参数：
1
2
{string} event
{Function} callback
用法：

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

3.3.3 vm.$off( [event, callback] )：移除自定义事件监听器；

参数：

1 2	{string \| Array<string>} event (只在 2.2.2+ 支持数组) {Function} [callback]

用法：

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

3.3.4 vm.$emit( eventName, […args] )：用于子组件向父组件传递事件和参数（发布订阅模式）；

参数：
1
2
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
示例：

子组件 :

Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
})

父组件 :

<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

（未学习）(4)实例方法-生命周期

生命周期图示

1. vm.$mount

2. vm.$forceUpdate

3. vm.$nextTick

4. vm.$destroy

4. 指令操作：

4.1 Vue 指令

4.1.1 v-text：更新元素的内容（整个内容全部更新），内容原本输出；

预期类型：string
用法：

1
2
3

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

意义：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 Mustache 插值。

4.1.2 v-html：更新元素的内容（可以解析HTML代码内容）；

预期类型：string
用法：
<div v-html="html"></div>

意义：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

4.1.3 v-show：条件渲染（display属性）；

预期类型：any
用法：
<div v-show="表达式"></div>

意义：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

4.1.4 v-if：条件渲染（是否加入DOM节点）；

预期类型：any
用法：
<div v-if="表达式"></div>

意义：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
【注：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。】

4.1.5 v-else：条件渲染，类似于if-else中的else部分；

不需要表达式
限制：前一兄弟元素必须有 v-if 或 v-else-if。
用法：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

意义：为 v-if 或者 v-else-if 添加“else 块”。

4.1.6 v-else-if：条件渲染，表示 v-if 的 “else if 块”，可以链式调用。

预期类型：any
限制：前一兄弟元素必须有 v-if 或 v-else-if。
用法：

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>

意义：表示 v-if 的 “else if 块”，可以链式调用。

4.1.7 v-for：列表渲染；

预期类型：Array | Object | number | string
用法：

2.1 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

1
2
3

<div v-for="item in items">
  {{ item.text }}
</div>

2.2 另外也可以为数组索引指定别名 (或者用于对象的键)：

1
2
3

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

2.3 v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

1
2
3

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

注意：需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值；

4.1.8 v-on：事件处理器；

缩写：@
预期：Function | Inline Statement | Object
参数：event: click/keyup/keydown/mouseup/mousedown...
修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)： -->
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

4.1.9 v-bind：属性（类/样式…）绑定

缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
修饰符：

.prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

用法

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

示例：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
<!-- .camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性： -->
<svg :view-box.camel="viewBox"></svg>
<!-- 在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。 -->

4.1.10 v-model：双向数据绑定；表单控件绑定

预期：随表单控件类型不同而不同。
限制：<input> <select> <textarea> components
修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

用法：

在表单控件或者组件上创建双向绑定。

4.1.11 v-pre：跳过这个元素和它的子元素的编译过程；

不需要表达式
用法：

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

示例：

1	<span v-pre>{{ this will not be compiled }}</span>

4.1.12 v-cloak：该指令保持在元素上直到关联实例结束编译，隐藏未编译的 Mustache 标签直到实例准备完毕；

不需要表达式
用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

意义：不会显示，直到编译结束。

4.1.13 v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新。

不需要表达式
详细：

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

示例：

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

注：请留心这会影响到该节点上的其它数据绑定；

5. 其他部分(特殊特性/内置的组件)

5.1 特殊特性

5.1.1 key

预期类型：number | string
详细：

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
示例：

<!-- 结合 v-for 的用例 -->
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

key 也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：a. 完整地触发组件的生命周期钩子; b. 触发过渡;

<!-- 当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。 -->
<transition>
  <span :key="text">{{ text }}</span>
</transition>

5.1.2 ref：给元素或子组件注册引用信息，信息将会注册在父组件的 $refs 对象上；子组件Refs

预期类型：string
详细：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例；

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
示例：

<!-- 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素 -->
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- 在子组件上，引用就指向组件实例 -->
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

5.1.3 slot：用于标记往哪个具名插槽中插入子组件内容；具名插槽

预期类型：string
详细：

用于标记往哪个具名插槽中插入子组件内容。

5.1.4 slot-scope(2.5.0+ 新增,替代了 scope)：用于将元素或组件表示为作用域插槽；作用域插槽

预期类型：function argument expression
详细：

用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。

此属性不支持动态绑定。

5.1.5 scope(2.5.0+ 中被 slot-scope 替代)

详细：

用于表示一个作为带作用域的插槽的 <template> 元素。
用法：

除了 scope 只可以用于 <template> 元素，其它和 slot-scope 都相同。

5.1.6 is：动态组件 / DOM 内模板的限制

预期类型：string | Object (组件的选项对象)
详细：

用于动态组件且基于DOM 内模板的限制来工作。
示例：

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>

<!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table>
  <tr is="my-row"></tr>
</table>

5.2 内置的组件

5.2.1 component ：渲染一个“元组件”为动态组件；动态组件

Props：

is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean

用法：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
示例：

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

5.2.2 transition：单个元素/组件的过渡效果；过渡：进入，离开和列表

Props：

name - string，用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 “v”
appear - boolean，是否在初始渲染时使用过渡。默认为 false。
css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode - string，控制离开/进入的过渡时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时生效。
enter-class - string
leave-class - string
appear-class - string
enter-to-class - string
leave-to-class - string
appear-to-class - string
enter-active-class - string
leave-active-class - string
appear-active-class - string

事件：

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

用法：

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。
示例代码：

<!-- 简单元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    }
  }
  ...
}).$mount('#transition-demo')

5.2.3 transition-group：多个元素/组件的过渡效果；过渡：进入，离开和列表

Props：

tag - string，默认为 span
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode，其他特性和 <transition> 相同。

事件：事件和 <transition> 相同。
用法：

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个 <transition-group> 的子节点必须有独立的 key ，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

示例代码：

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

5.2.4 keep-alive：保留组件状态或避免重新渲染；动态组件 - keep-alive

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

用法：

主要用于保留组件状态或避免重新渲染。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

示例代码：

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

【注意，<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。】

include 和 exclude 属性(2.1.0 新增)：允许组件有条件地缓存；

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

【匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。】

max(2.5.0 新增)：最多可以缓存多少组件实例；

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

1
2
3

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

【<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。】

5.2.5 slot：插槽分发内容；

Props：

name - string，用于命名插槽。

Usage：

<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
详细用法: 使用插槽分发内容
示例代码：

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
// 子组件实例化使用
<alert-box>
  Something bad happened.
</alert-box>