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（@）

  绑定事件

  <!-- 动态事件 (2.6.0+) -->
  <button v-on:[event]="doThis"></button>
  <!-- 动态事件缩写 (2.6.0+) -->
  <button @[event]="doThis"></button>
  <!-- 对象语法 (2.4.0+) -->
  <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
  

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

• v-bind（：）

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

  <!-- 动态特性名 (2.6.0+) -->
  <button v-bind:[key]="value"></button>
  
  <!-- 通过 prop 修饰符绑定 DOM 属性 -->
  <div v-bind:text-content.prop="text"></div>
  
  <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
  <child-component v-bind="$props"></child-component>
  
  
  

• 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"
    }
    // ...
  }
  
  

过渡

• transition
• transition-group

keep-alive

• 动态组件

  • 示例：

    <component v-bind:is="currentTabComponent"></component>
    

render