本文主要用于理解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: ‘

    {{firstName}} {{lastName}} aka {{alias}}

    ‘, data: function () { return { firstName: ‘Walter’, lastName: ‘White’, alias: ‘Heisenberg’ } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount(‘#mount-point’)
    // 渲染成

    Walter White aka Heisenberg

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

    {{ msg }}
    ‘) new Vue({ data: { msg: ‘hello’ }, render: res.render, staticRenderFns: res.staticRenderFns })让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象

    Vue.observable( object )

    返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景
    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 | 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: ‘

    {{ msg }}
    ‘ }) 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.$nextTickmounted: 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.$nextTickupdated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }

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

    activated

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

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

    deactivated

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

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

    beforeDestroy

    实例销毁之前调用，实例仍然完全可用

  • 该钩子在服务器端渲染期间不被调用实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

    destroyed

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

    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：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object }

    provide/inject

    选项/其他

  • name

  • delimiters
  • functional
  • model
  • inheritAttrs

  • comments

    functional

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

  • 函数式组件

    model

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

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

  • 把 input 用作 eventVue.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 } }, // … })等同于

    实例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 }

    vm.$scopedSlots

    类型：{ [name: string]: props => Array | 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 标签。跳过大量没有指令的节点会加快编译。{{ this will not be compiled }}

    v-cloak

    不需要表达式

  • 这个指令保持在元素上直到关联实例结束编译

  • 不会显示，直到编译结束[v-cloak] { display: none; }

    {{ message }}

    特殊attribute

  • key

  • ref
  • is
  • slot
  • slot-scope

  • scope

    key

    主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes

  • 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法

  • 使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

  • 有相同父元素的子元素必须有独特的 key

    ref

  • ref 被用来给元素或子组件注册引用信息

  • 引用信息将会注册在父组件的 $refs 对象上
  • 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素
  • 如果用在子组件上，引用就指向组件实例

    hello

  • ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

  • $refs 不是响应式的,不可以用它在模板中做数据绑定

    is

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

    内置组件

  • component

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