vue 体系思维导图模板_ProcessOn思维导图、流程图

选项/资源

directives

filters

components

选项/组合

parent

类型：Vue instance 指定已创建的实例之父实例，在两者之间简历父子关系。 子实例可以用this.$parent访问父实例，子实例被推入父 实例的$children数组中 节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。 更推荐用 props 和 events 实现父子组件通信

mixins

类型：Array<Object> mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项， 他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一 个钩子而创建组件本身也有一个，两个函数将被调用。 Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

extends

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。 这主要是为了便于扩展单文件组件。这和 mixins 类似

provide/inject

provide: Object | () => Object 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject: Array<string> | { [key: string]: string | Symbol | Object } provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了 一个可监听的对象，那么其对象的属性还是可响应的。

选项/其它

name

作为组件选项时起作用，允许组件模版递归的调用自身。 组件在全局用Vue.component()注册时，全局ID自动作为 组件的name。 指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。 另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>， 这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

delimiters

functional

使组件无状态（没有data）和无实例（没有this上下文）。 他们用一个简单的render函数返回虚拟节点使他们更容易渲染

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下， 一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event， 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达 到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。 当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。 而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。 这个选项不影响class和style绑定

comments

这个选项只在完整构建版本中的浏览器内编译时可用 当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

实例属性 vm.$*

$data

$porps

$el

$parent

$children

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。 如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组 配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

$slots

用来访问被插槽分发的内容。每个具名插槽有其相应的属性  (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。 default 属性包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

$scopedSlots

$refs

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处

$root

实例方法/事件 vm.$*

$on

监听当前实例上的自定义事件。事件可以由vm.$emit触发。 回调函数会接收所有传入事件触发函数的额外参数。

$onece

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

$off

移除自定义事件监听器 <ul><li>如果没有提供参数，则移除所有的事件监听器；</li><li>如果只提供了事件，则移除该事件所有的监听器；</li><li>如果同时提供了事件与回调，则只移除这个回调的监听器。</li></ul>

$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

实例方法/生命周期 vm.$*

$mount

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数， 模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。 这个方法返回实例自身，因而可以链式调用其它实例方法。

$forceUpdate

迫使 Vue 实例重新渲染。 注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它， 然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的  this 自动绑定到调用它的实例上。

$destory

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

全局配置 Vue.config.*

silent

Vue.config.silent = true 取消 Vue 所有的日志于警告

optionMergeStrategies

devtools

Vue.config.devtools = true 配置是否允许 vue-devtools 检查代码，开发版本默认为 true, 生产版本默认为false

errorHandler

warnHandler

ignoredElements

须使 Vue 忽略在 Vue 之外的自定义元素

keyCodes

自定义键位别名

performance

productionTip

设置为 false 以阻止 vue 在启动时生成生产提示

选项/数据

data

1、Vue 实例对象。vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。 2、以 _ 或 $ 开头的属性不会被vue实例代理，因为他们可能和vue内置的属性、api方法冲突。可以使用例如 vm.$data._property的方式访问这样属性。 3、当一个组件被定义，data必须返回一个初始化数据对象的函数，因为组件可能被用来创建多个实例。如果data任然是一个纯粹的对象，则所有的实例共享引用同一个数据对象！通过创建data函数，每次创建一个新实例后，我们能够调用data函数，从而返回一个初始数据的一个全新副本数据对象。 可以通过将vm.$data传入JSON.parse(JSON.stringif(...))得到深拷贝的原始数据对象

props

props可以是数组或对象，用来接收父组件的值。props可以是简单数组，或者使用对象作为替代， 对象允许配置高级选项。如类型监测、自定义验证和设置默认值。 type: String、Number、Boolean、Array、Object、Date、Function、Symbol任何自定义构造函数 上述内容组成的数组。会检查一下prop是否是给定的类型，否则抛出警告。 default: any 为该prop指定一个默认值。对象或者数组的默认值必须从一个工厂函数返回 required：Boolean 定义该prop是否是必填项。 validator: Function 自定义验证函数会将 prop 的值作为唯一的参数代入。

propsData

创建实例时传递props，主要作用是方便测试

computed

类型：{ [key: string]: Function | { get: Function, set: Function } } 计算属性将被混入到vue实例中。所有的getter和setter的this上下文自动地绑定为vue实例。 注意：如果为一个计算属性使用了箭头函数，则this不会指向这个组件的实例，不过你任然 可以将实例作为函数的第一个参数来访问

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 注意：不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不 会按照期望指向 Vue 实例，this.a 将是 undefined。

watch

类型：{ [key: string]：string | Function | Object | Array } 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。 Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。 注意：不应该使用箭头函数来定义watcher函数，箭头函数绑定了父级作用域的上下文，所以this将 不会按照期望值指向Vue实例

选项/生命周期钩子

beforeCreate

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

created

在实例创建完成后被立即调用。然后，挂载阶段还没开始，$el属性目前不可见 <ol><li>数据观测（data observer）</li><li>属性和方法的运算</li><li>watch/event事件回调 </li></ol>

beforeMount

在挂载开始之前被调用：相关的render函数首次被调用 该钩子在服务器端渲染期间不被调用

mounted

el被创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内 mounted 不会承诺所有子组件都一起被挂载。如果你希望等到整个视图 渲染完毕，可以用vm.$nextTick替换掉mounted

beforeUpdate

数据更新时调用，发生在虚拟dom打补丁之前。这里适合在更新之前访问现有的dom， 比如移除已添加的时间监听器 该钩子在服务器端渲染期间不能被调用，因为只有初次渲染会在服务端进行

updated

数据更改导致的虚拟dom重新渲染和打补丁，在这之后会被调用该钩子 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。 如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等 到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

beforeDestory

实例销毁之前调用。在这一步，实例任然完全可用 服务器端渲染期间不被调用

destoryed

实例销毁后调用。掉用后，vue实例指示的所有东西都会解除绑定， 所有的时间监听器会被移除，所有的子实例也会被销毁 服务器端渲染期间不被调用

activated

keep-alive组件激活时调用 服务端渲染期间不被调用

deactivated

keep-alive组件停用时调用 服务端渲染期间不被调用

errorCaptured

类型：(err: Error, vm: Component, info: string) => ?boolean 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数： 错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。 此钩子可以返回 false 以阻止该错误继续向上传播。

实例方法/数据 vm.$*

$watch

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。 回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。 对于更复杂的表达式，用一个函数取代。

$set

vm.$set(target, propertyName/index, value)

$delete

vm.$delete(target, propertyName/index)

全局Api Vue.*

Vue.extend( options ) 使用基础Vue构造器，创建一个'子类'。参数是一个包含组件选项的对象

Vue.nextTick( [callback, context] ) 在下次Dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取跟新后的Dom

Vue.set(target, propertyName/index, value) 响应对象中添加一个属性，确保这个新属性同样是响应式的

Vue.delete(target, propertyName/index) 删除对象的属性。如果对象是响应式的，删除能触发更新视图。从而解决vue不能监测到属性删除的限制

Vue.directive(id, [definition]) 注册或获取全局指令

Vue.filter(id, [definition])

Vue.component(id, [definition]) 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

Vue.use(plugin) 安装Vue.js 插件。如果插件是一个对象，必须提供install方法。 如果插件是一个函数，它会被作为install方法。install方法调用时，会将vue作为参数传入

Vue.mixin( mixin ) 全局注册一个混入，影响注册之后的所有创建的每个Vue实例。 插件坐着可以使用混入，向组件注入自定义行为。不推荐在应用中使用

Vue.compile( template ) 在render函数中编译模板字符串，只在独立构建时有效

Vue.observable( object ) 2.6 + 让一个对象可响应。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内， 并且会在发生改变时触发相应的更新。也可以作为最小的跨组件状态存储器，用于简单的场景

Vue.version Vue.version.split('.')[0]通过不同的版本采用不同的策略

选项/DOM

el

只在用new创建实例时生效，提供一个页面存在的dom元素作为vue实例的挂载目标 可以是css选择器，也可以是一个HTMLElement实例。 实例挂载之后，元素可以用vm.$el访问。如果实例化时存在这个选项，实例将立即进 入编译过程，否则，需要显示调用vm.$mount()动手开启编译。 注意：提供的元素只能作为挂载点。不同于vue1.x，所有的挂载元素会被vue生成的 Dom替换。因此不推荐挂载root实例到或者上 注意：render函数和template属性都不存在，挂载Dom元素的html会被提取出来用作 模板，此时，必须使用Runtime + Compiler构建的vue库

template

字符串模板作为Vue实例标识使用。模板将会替换挂载的元素。挂在元素的内容都 将被忽略，除非模板的内容有分发插槽。 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的innerHTML作为模板。 常用的技巧是用<script type="x-template">包含模板 注意：如果 Vue 选项中包含渲染函数，该模板将被忽略。

render

类型：（createElement: () => vNode） => VNode 字符串模板替代方案，该渲染函数接受一个createElement方法作为第一个参数用来创建VNode 如果组件是一个函数组件，渲染函数还会接受一个额外的context参数，为没有实例的函数组件 提供上下文信息 注意：Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选 项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

renderError

只在开发环境下工作 当render函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError。 这个功能配合hot-reload非常实用