vue总结

errorHandler和warnHandler

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

可用于前端错误日志。

需要注意的是promise里面抛出的函数不能被errorHandler捕获，在chrome浏览器中可以通过window的unhandlerejection事件去捕获错误，在ie浏览器中可以通过重写promise的方式去捕获promise内部抛出的错误。

Vue.nextTick

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

Vue.set和Vue.delete

set方法向响应式对像添加一个响应式的属性，而且触发视图更新

需要注意的是该响应式对象不能是Vue实例或者Vue实例的根数据对象。

delete方法和set方法类似，删除一个响应式对象的属性，并且触发视图更新。

指令

v-text

更新元素的textContent
v-html

更新元素的innerHTML
v-show

display
v-if和v-else和v-else-if

条件渲染
v-for
- 列表渲染
- key
  
  key的特殊属性主要用在Vue的虚拟Dom算法，在新旧nodes对比辨识vNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地的修改/复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
  
  有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
v-on（@）

绑定事件
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)
v-bind（：）

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

v-model
- 限制使用在以下元素中：
  - input
  - textarea
  - select
  - 自定义组件
- 修饰符：
  - .lazy-取代input监听change事件
  - .number-输入字符串转为有效的数字
  - .trim-输入首位空格过滤

v-slot（#）

插槽
v-pre

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

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

有些情况下，你仍然需要对底层dom进行操作，这个时候就会用到自定义指令。
- 钩子函数
  - bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  - inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  - update：VNode更新时调用。
  - componentUpdated：组件的VNode以及其子VNode全部更新后调用。
  - unbind：解绑时调用。
- 钩子函数参数
  - el：绑定的dom元素，可以进行直接操作。
  - binding
  - vnode
  - oldnode
- 动态指令参数
  
  指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

过滤器

作用：一般用于文本格式化
位置：可以用在两个地方双花括号插值和v-bind表达式

data

vue实例的数据对象，vue将会递归把data的属性转换为getter/setter，从而让data的属性可以响应数据变化。

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

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

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

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

computed

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

计算属性默认只有getter，不过在需要的时候也可以提供一个setter

methods

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

watch

监听器

deep：深度监听对象的属性
immediate：立即触发回调函数

生命周期

beforeCreate

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

在实例创建完成后被立即调用。此时数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前尚不可用。
beforeMount

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

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

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
updated & beforeUpdate

数据更新时触发，区别在于虚拟dom是否已经打补丁。
beforeDestroy & destroyed

实例销毁的时候调用。区别在于实例是否可以使用。
activated & deactivated

被keep-alive组件缓存的组件在激活和停用时调用。

混入

基础

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简单使用

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

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

选项合并
- 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
- 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

插件

插件开发

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function(Vue, option) {
  // 添加全局方法或者属性
  Vue.myGlobalMethods = function () {
    
  }
  
  // 添加全局资源
  Vue.directive('my-directive', {
    
  })
  
  // 组件选项
  Vue.mixin({
    
  })
  
  // 添加实例方法
  Vue.prototype.$myMethod = function () {
    
  }
}

Provide/inject

作用：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

简单使用：

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

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