选项与实例

选项

组件实例选项类型说明
dataFunction数据对象
propsArray<string> | Object用于接收父组件传入的数组或对象
computed{ [key: string]: Function | { get: Function, set: Function} }计算属性
methods{ [key: string]: Function }函数方法
watch{ [key: string]: string | Function | Object | Array }侦听器
emitsArray<string> | Object自定义事件
exposeArray<string>暴露在公共组件实例上的 property 列表
directivesObject声明可用于组件实例中的指令
componentsObject声明可用于组件实例中的组件
mixinsArray<Object>可用于将混合选项合并到当前组件实例
extendsObject用于扩展组件,且继承改组件选项
provideObject | () => Object用于向当前组件的子孙组件注入依赖
injectArray<string> | { [key: string]: string | Symbol | Object }用于获取祖先组件注入的依赖
setupFunction组件内部使用组合式 API 的入口
templatestring字符串模版,用于替换所挂载的 innerHTML
renderFunction自定义渲染函数
namestring组件名称
inheritAttrsboolean
compilerOptionsObject组件级别编译配置
delimiters已弃用

生命周期钩子

组件生命周期钩子说明
beforeCreate在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用
created在实例创建完成后被立即同步调用。
在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el、property 目前尚不可用
beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用
mounted在实例挂载完成后被调用
beforeUpdate在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器
updated在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
activatedkeep-alive 缓存的组件激活时调用
deactivatedkeep-alive 缓存的组件失活时调用
beforeUnmout在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的
unmounted卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载
errorCaptured在捕获一个来自后代组件的错误时被调用
renderTracked跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键
renderTriggered当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似,接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键

实例属性

实例属性类型说明
$dataObject组件实例正在侦听的数据对象
$propsObject当前组件接收到的来自父组件的传递的参数对象
$elany组件实例正在使用的根 DOM 元素
$optionsObject用于当前组件实例的初始化选项,当你需要在选项中包含自定义 property 时有用
$parentVue instance父组件实例
$rootVue instance根组件实例
$slots{ [name: string]: (...args: any[]) => Array<VNode> | undefined}以编程方式访问通过插槽分发的内容
$refsObject当前组件注册过 ref attribute 的所有 DOM 元素和组件实例
$attsObject包含父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件

参考文档:

实例方法

实例方法说明
$watch侦听组件实例上的响应式 property 或函数计算结果的变化
$emit触发当前实例上的事件,附加参数都会传给监听器回调
$forceUpdate迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件
$nextTick将回调延迟到下次 DOM 更新循环之后执行

参考文档: