Vue实例的属性和方法

阳光穿透心脏的1/2处 2022-02-18 10:59 420阅读 0赞

## 一、Vue之实例属性 ##

![image.png][]

> `Vue` 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 `$`，以便与代理的数据属性区分

**组件树**

*  `$parent`：用来访问组件实例的父实例
 *  `$root`: 用来访问当前组件树的根实例
 *  `$children`:用来访问当前组件实例的直接子组件实例
 *  `$refs`:用来访问`v-ref`指令的子组件

**DOM访问**

*  `$el`：用来挂载当前组件实例的`dom`元素
 *  `$els`：用来访问`$el`元素中使用了`v-el`指令的`DOM`元素
 *   
    
        <div id="app2">
            {
             { message }}
        </div>
        <script>
            var vm2 = new Vue({
                el:"#app2",
                data:{
                    message : "I am message."
                }
            });
            console.log(vm2.$el);          //vm2.$el === 原生js中document.getElementById("app2") 
            vm2.$el.style.color = "red";   //变成红色
        </script>

**数据访问**

*  `$data`：用来访问组件实例观察的数据对象
 *  `$options`：用来访问组件实例化时的初始化选项对象

**DOM方法的使用**

*  `$appendTo(elementOrSelector, callback)`：将`el`所指的`DOM`元素插入目标元素
 *  `$before(elementOrSelector, callback)`：将`el`所指的`DOM`元素或片段插入目标元素之前
 *  `$after(elementOrSelector, callback)`：将`el`所指的`DOM`元素或片段插入目标元素之后
 *  `$remove(callback)`：将`el`所指的`DOM`元素或片段从`DOM`中删除
 *  `$nextTick(callback)`：用来在下一次`DOM`更新循环后执行指定的回调函数

**event方法的使用**

*  **监听**
    
     *  `$on(event, callback)`：监听实例的自定义事件
     *  `$once(event, callback)`：同上，但只能触发一次
 *  **触发**
    
     *  `$dispatch(event, args)`：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回`false`停止
     *  `$broadcast(event, args)`：广播事件，遍历当前实例的`$children`，如果对应的监听函数返回false，就停止
     *  `$emit(event, args)`：触发事件

<div id="ap2">
        <p>{
       { num }}</p>
        <button @click="increase1"> add </button>
    </div>
    <button onclick="reduce2()"> reduce2 </button> <button onclick="offReduce()"> off reduce </button>
    <script>
        var ap2 = new Vue({
            el:"#ap2",
            data:{
                num:5
            },
            methods:{
                increase1:function () {
                    this.num ++;
                }
            }
        });
        // .$on定义事件 .$once定义只触发一次的事件
        ap2.$on("reduce",function (diff) {
            ap2.num -= diff ;
        });
     
        // .$emit触发事件
        function reduce2() {
            ap2.$emit("reduce", 2);
        }
     
        // .$off解除事件 解除后，定义的reduce事件将不再执行
        function offReduce() {
            ap2.$off("reduce");
        }
    </script>

# #

## 2.1 $.watch()二、实例方法 ##

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`  改变后调用

###  ###

### 2.2 vm.$nextTick ###

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

<div id="app">
    </div>
    <button onclick="vm.$destroy()">销毁实例 $destroy</button>
    <button onclick="vm.$forceUpdate()">刷新构造器 $forceUpdate</button>
    <button onclick="edit()">更新 $.nextTick(fn)</button>
    <script>
        var Header = Vue.extend({
            template:`<p>{
       { message }}</p>`,
            data:function () {
                return {
                    message:"I am message"
                }
            },
            updated:function () {
                console.log("updated 更新之后");
            },
            destroyed:function () {
                console.log("destroy 销毁之后");
            }
        });
        var vm = new Header().$mount("#app");
     
        function edit() {
            vm.message = "new message";     //更新数据
            vm.$nextTick(function () {      //更新完成后调用
                console.log("更新完后，我被调用");
            })
        }

> 放在`Vue.nextTick()`回调函数中的执行的应该是会对`DOM`进行操作的 `js`代码

**什么时候需要用的Vue.nextTick()**

*  你在`Vue`生命周期的`created()`钩子函数进行的`DOM`操作一定要放在`Vue.nextTick()`的回调函数中。原因是什么呢，原因是在`created()`钩子函数执行的时候`DOM` 其实并未进行任何渲染，而此时进行`DOM`操作无异于徒劳，所以此处一定要将`DOM`操作的js代码放进`Vue.nextTick()`的回调函数中。与之对应的就是`mounted`钩子函数，因为该钩子函数执行时所有的`DOM`挂载和渲染都已完成，此时在该钩子函数中进行任何`DOM`操作都不会有问题 。
 *  在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的`DOM`结构的时候，这个操作都应该放进`Vue.nextTick()`的回调函数中

为了在数据变化之后等待 `Vue` 完成更新 `DOM` ，可以在数据变化之后立即使用 `Vue.nextTick(callback)` 。这样回调函数在 `DOM` 更新完成后就会调用

--------------------

方法:

vm.$mount()
    #手动挂载
    //vm.$mount('#itany');
    
    vm.$destroy()
    #销毁实例
    
    vm.$nextTick(callback)
    #将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
    data:{
                user:{
                    id:1001,
                    name:'tom'
                }
            },
    
    vm.$set(object,key,value)
    #添加属性值
    Vue.set(this.user,'age',1)
    
    
    vm.$delete(object,key)
    #删除属性值
    Vue.delete(this.user,'age')
    
    vm.$watch(data,callback[,options])
    #更新属性值
    
    vm.$watch(data,callback[,options])
    #监测数值变化

实例属性：

![929843-20171203201850616-1019255273.png][]

对应解释如下：

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原型上的方法了

![929843-20171203202012007-1283069528.png][]

接下来主要看下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前
    }

[image.png]: /images/20220218/fe2811ca77ef45a2937a16374da67ab0.png
[929843-20171203201850616-1019255273.png]: /images/20220218/7f8e766c47c6406a917e116d0b4ce58d.png
[929843-20171203202012007-1283069528.png]: /images/20220218/32358c4b203f45018ea6d8fe0716a46a.png