vue 实例结构
实例属性
以 $ 开头 、以 _ 开头
以 $ 开头
$el
组件挂载节点DOM,$el.__vue__
指向挂载实例
$vnode
组件调用节点的vnode,通过tag可以与 _vnode
对比差异。$vnode.$elm
为实际组件节点DOM,与 _vnode.$elm
相同。
$data
当前组件的响应式数据集对象,vue初始化时的data配置对象。
$props
当前组件接收到的 props 对象。
$options
用于当前 Vue 实例的初始化选项。
$parent
组件vue实例。没有的话为null。
$root
当前组件树的根 Vue 实例。
$children
当前实例的直接子组件vue实例。
$slots
用来访问被 插槽
的内容。
$scopedSlots
用来访问作用域插槽
。对于包括 默认 slot
在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
$refs
一个对象,包含注册过 ref
attribute 的所有 DOM 元素和组件实例。
$isServer
当前 Vue 实例是否运行于服务器。
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class
和 style
除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和 style
除外),并且可以通过 v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。
$listeners
包含了父作用域中的 (不含 .native
修饰器的) v-on
事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。
$store
Vuex创建的store实例,可以获取state、getter数据,也可以调用commit、dispatch 触发action,mapState、mapGetter、mapActions、mapMutations 都通过该字段映射到vue实例上。
以 _ 开头
_vnode
组件根节点的vnode,通过tag可以与 $vnode
对比差异。_vnode.$elm
为实际组件节点DOM,与 $vnode.$elm
相同。
_computedWatchers
_data
组件实例 data 数据集,通过_data 代理数据访问
_directInactive
_events
组件实例通过 $on 方法监听的事件都放 _events 字段维护
_hasHookEvent
_i18n
使用 i18n 国际化对象,可以通过此字段访问 $t 等方法获取国际化文本。
_root
组件树根组件实例
_inactive
_isBeingDestroyed
内部标识位-组件是否准备卸载 用来判断是否调用 beforeDestroy hook
_isDestroyed
内部标识位-组件是否已卸载 用来判断是否调用 destroyed hook
_isMounted
内部标识位-组件是否已挂载
_isVue
内部标识位
_routerRoot
_self
组件实例自身
_staticTrees
_subscribing
_uid
实例id,全局维护
_watcher
组件自身watcher
_watchers
组件实例相关watcher数组,computed监听、watch兼容
_renderProxy
组件实例代理字段
实例方法
已 $ 开头
$watch
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。
$set
设置对象或数组的字段/索引值,触发响应更新
$delete
移除对象或数组的字段/索引值,触发响应更新
$on
监听当前实例上的自定义事件。事件可以由 vm.$emit
触发。事件会挂载到 _events
字段上。
$once
监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
$off
-
移除自定义事件监听器。从
_events
字段移除相应事件。- 如果没有提供参数,则移除所有的事件监听器;
- 如果只提供了事件,则移除该事件所有的监听器;
- 如果同时提供了事件与回调,则只移除这个回调的监听器。
$emit
触发当前实例上的事件。从 _events
字段上读取事件执行。
$mount
未挂载,可以通过使用 vm.$mount(dom)
手动地挂载一个未挂载的实例。
已挂载,可以通过使用 vm.$mount()
返回挂载的实例。
$forceUpdate
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
$nextTick
将回调延迟到下次 DOM 更新循环之后执行。需要注意nextTick的实现原理,是通过 Promise 还是 SetTimeout/setImmediate。
$destroy
完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发 beforeDestroy
和 destroyed
的钩子。
$createElement
createElement 函数
以 _ 开头
_c
createElement 函数别名,创建实例对应 vnode对象