vue的一些常用的实例属性和方法
vue除了常规用法外,还有一些实例属性和方法,在此总结记录下
Vue
实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $
,以便与代理的数据属性区分。
一、实例属性
1、vm.$data:获取data里的数据,相当于用this获取
2、vm.$options:用来获取定义在data外的数据和方法的
export default { name: "Test", data() { return { }; }, //在data外面定义的属性和方法通过$options可以获取和调用 name: "zs", age: 12, haha() { console.log("haha"); }, created() { console.log(this.$options.name); // zs console.log(this.$options.age); //12 this.$options.haha(); // haha },
3、vm.$refs:获取所有ref属性的标签
$refs 用于获取指定的dom元素。
首先在标签中定义ref="xxx",然后通过this.$refs.xxx获取到该dom元素。
注意:在created阶段,是不能获取到$ref绑定的元素的。
4、vm.$el:获取vue挂载的实例的dom对象,在mounted生命周期中才有效。
二、方法
1、vm.$mount(\'#id\'):手动挂载
2、vm.$destroy():销毁实例
3、vm.$nextTick(cb):将回调延迟到dom更新之后执行。一般在修改数据之后使用它,修改数据之后需要等待dom更新,dom更新完成之后就会调用cb回调函数
4、vm.$set(obj, key, val):添加属性值
5、vm.$delete(obj, key):删除属性值
6、vm.$watch(data, cb[, options]):监听数值变化
var data = { a: 1 } var vm = new Vue({ el: \'#example\', data: data }) vm.$data === data // -> true vm.$el === document.getElementById(\'example\') // -> true // $watch 是一个实例方法 vm.$watch(\'a\', function (newVal, oldVal) { }) // 这个回调将在 `vm.a` 改变后调用
三、方法总结
1、组件树
$parent
:用来访问组件实例的父实例
$root:
用来访问当前组件树的根实例
$children:
用来访问当前组件实例的直接子组件实例
$refs:
用来访问ref
指令的子组件
2、DOM访问
$el
:用来获取挂载当前组件实例的dom
元素
$els
:用来访问$el
元素中使用了v-el
指令的DOM
元素
3、DOM方法的使用
$appendTo(elementOrSelector, callback)
:将el
所指的DOM
元素插入目标元素
$before(elementOrSelector, callback)
:将el
所指的DOM
元素或片段插入目标元素之前
$after(elementOrSelector, callback)
:将el
所指的DOM
元素或片段插入目标元素之后
$remove(callback)
:将el
所指的DOM
元素或片段从DOM
中删除
$nextTick(callback)
:用来在下一次DOM
更新循环后执行指定的回调函数
4、event方法的使用
监听
$on(event, callback)
:监听实例的自定义事件
$once(event, callback)
:同上,但只能触发一次
$off(event):解除事件
// .$on定义事件 .$once定义只触发一次的事件 ap2.$on("reduce",function (diff) { ap2.num -= diff ; }); // .$emit触发事件 function reduce2() { ap2.$emit("reduce", 2); } // .$off解除事件 解除后,定义的reduce事件将不再执行 function offReduce() { ap2.$off("reduce"); }
触发
$dispatch(event, args)
:派发事件,先在当前实例触发,再沿父链一层层向上,对应的监听函数返回false
停止
$broadcast(event, args)
:广播事件,遍历当前实例的$children
,如果对应的监听函数返回false,就停止
$emit(event, args)
:触发事件
实例属性:
对应解释如下:
vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProxy // Proxy代理对象 vm._self // 当前vm实例 vm.$parent // 用于自定义子组件中,指向父组件的实例 vm.$root // 指向根vm实例 vm.$children // 当前组件的子组件实例数组 vm.$refs vm._watcher = null vm._inactive = null vm._directInactive = false vm._isMounted = false // 标识是否已挂载 vm._isDestroyed = false // 标识是否已销毁 vm._isBeingDestroyed = false // 标识是否正在销毁 vm._events // 当前元素上绑定的自定义事件 vm._hasHookEvent // 标示是否有hook:开头的事件 vm.$vnode // 当前自定义组件在父组件中的vnode,等同于vm.$options._parentVnode vm._vnode // 当前组件的vnode vm._staticTrees // 当前组件模板内分析出的静态内容的render函数数组 vm.$el // 当前组件对应的根元素 vm.$slots // 定义在父组件中的slots,是个对象键为name,值为响应的数组 vm.$scopedSlots = emptyObject // 内部render函数使用的创建vnode的方法 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // 用户自定义render方法时,传入的参数 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) vm._props // 被observe的存储props数据的对象 vm._data // 被observe的存储data数据的对象 vm._computedWatchers // 保存计算属性创建的watcher对象
看下实例方法,,其实就是Vue原型上的方法了
接下来主要看下vm.$options,其实也就是我们new Vue(options),options这个选项对象可传入的属性,一个很吊的对象。
declare type ComponentOptions = { // data data: Object | Function | void; // 传入的data数据 props?: { [key: string]: PropOptions }; // props传入的数据 propsData?: ?Object; // 对于自定义组件,父级通过`props`传过来的数据 computed?: { // 传入的计算属性 [key: string]: Function | { get?: Function; set?: Function; cache?: boolean } }; methods?: { [key: string]: Function }; // 传入的方法 watch?: { [key: string]: Function | string }; // 传入的watch // DOM el?: string | Element; // 传入的el字符串 template?: string; // 传入的模板字符串 render: (h: () => VNode) => VNode; // 传入的render函数 renderError?: (h: () => VNode, err: Error) => VNode; staticRenderFns?: Array<() => VNode>; // 钩子函数 beforeCreate?: Function; created?: Function; beforeMount?: Function; mounted?: Function; beforeUpdate?: Function; updated?: Function; activated?: Function; deactivated?: Function; beforeDestroy?: Function; destroyed?: Function; // assets directives?: { [key: string]: Object }; // 指令 components?: { [key: string]: Class<Component> }; // 子组件的定义 transitions?: { [key: string]: Object }; filters?: { [key: string]: Function }; // 过滤器 // context provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any }; inject?: { [key: string]: string | Symbol } | Array<string>; // component v-model customization model?: { prop?: string; event?: string; }; // misc parent?: Component; // 父组件实例 mixins?: Array<Object>; // mixins传入的数据 name?: string; // 当前的组件名 extends?: Class<Component> | Object; // extends传入的数据 delimiters?: [string, string]; // 模板分隔符 // 私有属性,均为内部创建自定义组件的对象时使用 _isComponent?: true; // 是否是组件 _propKeys?: Array<string>; // props传入对象的键数组 _parentVnode?: VNode; // 当前组件,在父组件中的VNode对象 _parentListeners?: ?Object; // 当前组件,在父组件上绑定的事件 _renderChildren?: ?Array<VNode>; // 父组件中定义在当前元素内的子元素的VNode数组(slot) _componentTag: ?string; // 自定义标签名 _scopeId: ?string; _base: Class<Component>; // Vue _parentElm: ?Node; // 当前自定义组件的父级dom结点 _refElm: ?Node; // 当前元素的nextSlibing元素,即当前dom要插入到_parentElm结点下的_refElm前 }