Vue实例字段解析-根据实际使用场景持续更新

201 阅读1分钟

vue 实例结构

image.png

image.png

实例属性

以 $ 开头 、以 _ 开头

以 $ 开头

$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 代理数据访问

image.png

_directInactive

_events

组件实例通过 $on 方法监听的事件都放 _events 字段维护

_hasHookEvent

_i18n

使用 i18n 国际化对象,可以通过此字段访问 $t 等方法获取国际化文本。

_root

组件树根组件实例

_inactive

_isBeingDestroyed

内部标识位-组件是否准备卸载 用来判断是否调用 beforeDestroy hook

_isDestroyed

内部标识位-组件是否已卸载 用来判断是否调用 destroyed hook

_isMounted

内部标识位-组件是否已挂载

_isVue

内部标识位 image.png

_routerRoot

_self

组件实例自身

_staticTrees

_subscribing

_uid

实例id,全局维护

_watcher

组件自身watcher

_watchers

组件实例相关watcher数组,computed监听、watch兼容

_renderProxy

组件实例代理字段 image.png image.png


实例方法

已 $ 开头

$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对象