Vue API总结

本文主要用于理解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` 时候继承 CompA
var CompB = {
extends: CompA,
...
}

provide/inject

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

provide：Object | () => Object
inject：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