本文次要用于了解vue api内容，查缺补漏，对于根本api，此处不做解释。

全局配置

通过 Vue.config设置

  • silent
  • optionMergeStrategies
  • devtools
  • errorHandler
  • warnHandler
  • ignoredElements
  • keyCodes
  • performance
  • productionTip

Vue.config.errorHandler

Vue.config.errorHandler = function(err, vm, info) {  console.log(`组件${vm.$vnode.tag}产生谬误：${err.message},${info}`)}
mounted() {  b  },

log

组件xxx产生谬误：b is not defined,mounted hook

全局API

  • Vue.extend
  • Vue.nextTick
  • Vue.set
  • Vue.delete
  • Vue.directive
  • Vue.filter
  • Vue.component
  • Vue.use
  • Vue.mixin
  • Vue.compile
  • Vue.observable
  • Vue.version

Vue.extend

应用根底 Vue 结构器，创立一个“子类”。参数是一个蕴含组件选项的对象
留神 data 选项是特例，须要是函数

// 创立结构器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')
<div id="mount-point"></div>// 渲染成<p>Walter White aka Heisenberg</p>

Vue.nextTick

Dom更新循环完结后执行的提早回调,Vue 在更新 DOM 时是异步执行的

  • 只有侦听到数据变动，Vue 将开启一个队列，并缓冲在同一事件循环中产生的所有数据变更
  • 如果同一个 watcher 被屡次触发，只会被推入到队列中一次。这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的

案例：此时批改msg。

vm.msg = "11"console.log("原信息":msg)Vue.nextTick(function (){  console.log("更新后":msg)})

2.1新增反对promise

Vue.nextTick()  .then(function () {    // DOM 更新了  })await Vue.nextTick()

组件内用$nextTick

Vue.set / Vue.delete

在数据是数组时。更新下标时候用过

Vue.use()

参数：{Object | Function} plugin

  • 如果插件是一个对象，必须提供 install 办法
  • 如果插件是一个函数，它会被作为 install 办法。install 办法调用时，会将 Vue 作为参数传入
  • 该办法须要在调用 new Vue() 之前被调用。
  • 当 install 办法被同一个插件屡次调用，插件将只会被装置一次

Vue.compile(template)

将一个模板字符串编译成 render 函数。

  • 留神：只在完整版时可用

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

    Vue.observable( object )

    让一个对象可响应。Vue 外部会用它来解决 data 函数返回的对象

返回的对象能够间接用于渲染函数和计算属性内，并且会在产生变更时触发相应的更新。也能够作为最小化的跨组件状态存储器，用于简略的场景

const state = Vue.observable({ count: 0 })const Demo = {  render(h) {    return h('button', {      on: { click: () => { state.count++ }}    }, `count is: ${state.count}`)  }}

选项/数据

  • data
  • props
  • propsData
  • computed
  • methods
  • watch

props

  • Array<string> | Object

    // 简略语法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    }  }}})

    propsData

  • { [key: string]: any }
  • 只用于 new 创立的实例中

  • 创立实例时传递 props。次要作用是不便测试

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

watch

留神：不应该应用箭头函数来定义 watcher 函数

选项/DOM

  • el
  • template
  • render
  • renderError

选项/生命周期钩子

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • derectived
  • beforeDestroy
  • destroyed
  • errorCaptured

所有的生命周期钩子主动绑定 this 上下文到实例中，因而你能够拜访数据,对 property 和办法进行运算

  • 留神：不能应用箭头函数来定义一个生命周期办法 （this不指vue实例）

beforeCreate

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

created

在实例创立实现后被立刻调用。

  • 实例已实现以下的配置：数据观测 (data observer)，property 和办法的运算，watch/event 事件回调。
  • 挂载阶段还没开始，$el property 目前尚不可用。

beforeMount

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

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

mounted

  • 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  • 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内
  • 留神 mounted 不会保障所有的子组件也都一起被挂载

  • 如果你心愿等到整个视图都渲染结束，能够在 mounted 外部应用 vm.$nextTick

    mounted: function () {this.$nextTick(function () {  // Code that will run only after the  // entire view has been rendered})}
  • 留神 该钩子在服务器端渲染期间不被调用

beforeUpdate

  • 数据更新时调用，产生在虚构 DOM 打补丁之前
  • 这里适宜在更新之前拜访现有的 DOM，比方手动移除已增加的事件监听器
  • 留神 该钩子在服务器端渲染期间不被调用，因为只有首次渲染会在服务端进行

updated

  • 因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用该钩子
  • 当这个钩子被调用时，组件 DOM 曾经更新，所以你当初能够执行依赖于 DOM 的操作
  • 在大多数状况下，你应该防止在此期间更改状态
  • 如果要相应状态扭转，通常最好应用计算属性或 watcher 取而代之
  • 留神 updated 不会保障所有的子组件也都一起被重绘

  • 如果你心愿等到整个视图都重绘结束，能够在 updated 里应用 vm.$nextTick

    updated: function () {this.$nextTick(function () {  // Code that will run only after the  // entire view has been re-rendered})}
  • 该钩子在服务器端渲染期间不被调用

activated

被 keep-alive 缓存的组件激活时调用

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

deactivated

被 keep-alive 缓存的组件停用时调用

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

beforeDestroy

实例销毁之前调用，实例依然齐全可用

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

    destroyed

    实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

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

errorCaptured

捕捉一个来自子孙组件的谬误时被调用

  • (err: Error, vm: Component, info: string) => ?boolean
  • 三个参数：谬误对象、产生谬误的组件实例，一个蕴含谬误起源信息的字符串
  • 返回 false 以阻止该谬误持续向上传

选项/资源

  • directives
  • filters
  • components

选项/组合

  • parent
  • mixins
  • extends
  • provide/inject

mixins

var mixin = {  created: function () { console.log(1) }}var vm = new Vue({  created: function () { console.log(2) },  mixins: [mixin]})// => 1// => 2

extends

容许申明扩大另一个组件,而无需应用 Vue.extend

  • 这次要是为了便于扩大单文件组件

    var CompA = { ... }// 在没有调用 `Vue.extend` 时候继承 CompAvar CompB = {extends: CompA,...}

    provide/inject

    容许一个先人组件向其所有子孙后代注入一个依赖

    provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }

选项/其余

  • name
  • delimiters
  • functional
  • model
  • inheritAttrs
  • comments

functional

使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简略的 render 函数返回虚构节点使它们渲染的代价更小

  • 函数式组件

model

容许一个自定义组件在应用 v-model 时定制 prop 和 event

  • 默认状况下v-model 会把 value 用作 prop

  • 把 input 用作 event

    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>

实例property

  • vm.$data
  • vm.$props
  • vm.$el
  • vm.$options
  • vm.$parent
  • vm.$root
  • vm.$children
  • vm.$slots
  • vm.$scopedSlots
  • vm.$refs
  • vm.$isServer
  • vm.$attrs
  • vm.$listeners

vm.$options

用于以后 Vue 实例的初始化选项

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

vm.$slots

类型：{ [name: string]: ?Array<VNode> }

vm.$scopedSlots

类型：{ [name: string]: props => Array<VNode> | undefined }

vm.$refs

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

<base-input ref="usernameInput"></base-input>this.$refs.usernameInput

vm.$isServer

boolean，以后 Vue 实例是否运行于服务器

vm.$attrs

蕴含了父作用域中不作为 prop 被辨认 (且获取) 的 attribute 绑定 (class 和 style 除外)

实例办法/数据

  • vm.$watch
  • vm.$set
  • vm.$delete

实例办法/事件

  • vm.$on
  • vm.$once
  • vm.$off
  • vm.$emit

指令

  • v-text
  • v-html
  • v-once
  • v-show
  • v-if
  • v-else
  • v-else-if
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-slot
  • v-pre
  • v-cloak

v-pre

不须要表达式

  • 跳过这个元素和它的子元素的编译过程

  • 能够用来显示原始 Mustache 标签。跳过大量没有指令的节点会放慢编译。

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

v-cloak

不须要表达式

  • 这个指令放弃在元素上直到关联实例完结编译

  • 不会显示，直到编译完结

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

非凡attribute

  • key
  • ref
  • is
  • slot
  • slot-scope
  • scope

key

次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes

  • 如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法
  • 应用 key 时，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。
  • 有雷同父元素的子元素必须有独特的 key

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>
  • ref 和 v-for 一起应用的时候，你失去的 ref 将会是一个蕴含了对应数据源的这些子组件的数组。
  • $refs 不是响应式的,不能够用它在模板中做数据绑定

is

用于动静组件且基于 DOM 内模板的限度来工作

<!-- 当 `currentView` 扭转时，组件也跟着扭转 --><component v-bind:is="currentView"></component><!-- 这样做是有必要的，因为 `<my-row>` 放在一个 --><!-- `<table>` 内可能有效且被搁置到里面 --><table>  <tr is="my-row"></tr></table>

内置组件

  • component
  • transition
  • transition-group
  • keep-alive
  • slot