vue全局API

​​Vue.extend( options )​​

• 参数：

• ​​{Object} options​​

• 用法：
  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
  ​​data​​​ 选项是特例，需要注意 - 在 ​​Vue.extend()​​ 中它必须是函数

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

​​Vue.nextTick( [callback, context] )​​

• 参数：

• ​​{Function} [callback]​​
• ​​{Object} [context]​​

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

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

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

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

​​Vue.set( target, key, value )​​

• 参数：

• ​​{Object | Array} target​​
• ​​{string | number} key​​
• ​​{any} value​​

• 返回值：设置的值。
• 用法：
  向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 ​​​this.myObject.newProperty = 'hi'​​​)
  注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

​​Vue.delete( target, key )​​

• 参数：

• ​​{Object | Array} target​​
• ​​{string | number} key/index​​

仅在 2.2.0+ 版本中支持 Array + index 用法。

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

在 2.2.0+ 中同样支持在数组上工作。

• 目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

​​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')

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

​​Vue.filter( id, [definition] )​​

• 参数：

• ​​{string} id​​
• ​​{Function} [definition]​​

• 用法：
  注册或获取全局过滤器。

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

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

• 参考：​​过滤器​​

​​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')

• 参考：​​组件​​

​​Vue.use( plugin )​​

• 参数：

• ​​{Object | Function} plugin​​

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

​​Vue.mixin( mixin )​​

• 参数：

• ​​{Object} mixin​​

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

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

• 参考：​​渲染函数​​

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

​​选项 / 数据​​

​​data​​

• 类型：​​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 })

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

• 参考：​​Props​​

​​propsData​​

• 类型：​​{ [key: string]: any }​​
• 限制：只用于 ​​new​​ 创建的实例中。
• 详细：
  创建实例时传递 props。主要作用是方便测试。
• 示例：

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

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

• 参考：​​Props​​

​​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

• 参考：​​计算属性​​

​​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

• 参考：​​事件处理器​​

​​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。
• 参考：​​实例方法 / 数据 - vm.$watch​​

​​选项 / DOM​​

​​el​​

• 类型：​​string | HTMLElement​​
• 限制：只在由 ​​new​​ 创建的实例中遵守。
• 详细：
  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
  在实例挂载之后，元素可以用 ​​​vm.$el​​​ 访问。
  如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 ​​​vm.$mount()​​​ 手动开启编译。
  提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 ​​​<html>​​​ 或者 ​​<body>​​​ 上。
  如果 ​​​render​​​ 函数和 ​​template​​ 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。
• 参考：

• ​​生命周期图示​​
• ​​运行时 + 编译器 vs. 只包含运行时​​

​​template​​

• 类型：​​string​​
• 详细：
  一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
  如果值以 ​​​#​​​ 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 ​​<script type="x-template">​​​ 包含模板。
  出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。
  如果 Vue 选项中包含渲染函数，该模板将被忽略。
• 参考：

• ​​生命周期图示​​
• ​​用插槽分发内容​​

​​render​​

• 类型：​​(createElement: () => VNode) => VNode​​
• 详细：
  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 ​​​createElement​​​ 方法作为第一个参数用来创建 ​​VNode​​​。
  如果组件是一个函数组件，渲染函数还会接收一个额外的 ​​​context​​​ 参数，为没有实例的函数组件提供上下文信息。
  Vue 选项中的 ​​​render​​​ 函数若存在，则 Vue 构造函数不会从 ​​template​​​ 选项或通过 ​​el​​ 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
• 参考：​​渲染函数​​

​​renderError​​

2.2.0 新增

• 类型：​​(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')

• 参考：​​渲染函数​​

​​选项 / 生命周期钩子​​

所有的生命周期钩子自动绑定 ​​this​​​ 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 ​​created: () => this.fetchTodos()​​​)。这是因为箭头函数绑定了父上下文，因此 ​​this​​​ 与你期待的 Vue 实例不同，​​this.fetchTodos​​ 的行为未定义。

​​beforeCreate​​

• 类型：​​Function​​
• 详细：
  在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• 参考：​​生命周期图示​​

​​created​​

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

​​beforeMount​​

• 类型：​​Function​​
• 详细：
  在挂载开始之前被调用：相关的 ​​​render​​​ 函数首次被调用。
  该钩子在服务器端渲染期间不被调用。
• 参考：​​生命周期图示​​

​​mounted​​

• 类型：​​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
  })
}

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

• 参考：​​生命周期图示​​

​​beforeUpdate​​

• 类型：​​Function​​
• 详细：
  数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
• 参考：​​生命周期图示​​

​​updated​​

• 类型：​​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
  })
}

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

• 参考：​​生命周期图示​​

​​activated​​

• 类型：​​Function​​
• 详细：
  keep-alive 组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
• 参考：

• ​​构建组件 - keep-alive​​
• ​​动态组件 - keep-alive​​