美文网首页
vue中nextTick()的使用理解

vue中nextTick()的使用理解

作者: zhaur | 来源:发表于2019-03-01 11:57 被阅读0次

    是当接收数据后,需要重新调用刷新该界面数据,在官网在的vue的api中有一个nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据有更新,在dom中渲染后,自动执行该函数。

    Vue.component('example', {
      template: '<span>{{ message }}</span>',
      data: function () {
        return {
          message: 'not updated'
        }
      },
      methods: {
        updateMessage: function () {
          this.message = 'updated'
          console.log(this.$el.textContent) // => 'not updated'
          this.$nextTick(function () {
            console.log(this.$el.textContent) // => 'updated'
          })
        }
      }
    }
    
    /**
     * 定义自己的基本数据类型
     */
    
    class PrimitiveString {
        static [Symbol.hasInstance](data) {
            return typeof data === 'string';
        }
    }
    
    class PrimitiveNumber {
        static [Symbol.hasInstance](data) {
            return typeof data === 'number';
        }
    }
    
    class PrimitiveUndefined {
        static [Symbol.hasInstance](data) {
            return typeof data === 'undefined';
        }
    }
    
    class PrimitiveBool {
        static [Symbol.hasInstance](data) {
            return typeof data === 'boolean';
        }
    }
    
    class PrimitiveNull {
        static [Symbol.hasInstance](data) {
            return data === null;
        }
    }
    
    class PrimitiveSymbol {
        static [Symbol.hasInstance](data) {
            return typeof data === 'symbol';
        }
    }
    
    /**
     * 测试 
     */
    
    let num = 2;
    console.log(num instanceof PrimitiveNumber);    //true
    console.log('isComplex: ', isComplex(num));
    
    let str = 'Yvette';
    console.log(str instanceof PrimitiveString);    //true
    console.log('isComplex: ', isComplex(str));
    
    let flag = false;
    console.log(flag instanceof PrimitiveBool);     //true
    console.log('isComplex: ', isComplex(flag));
    
    let und = undefined;
    console.log(und instanceof PrimitiveUndefined); //true
    console.log('isComplex: ', isComplex(und));
    
    let nul = null;
    console.log(nul instanceof PrimitiveNull);      //true
    console.log('isComplex: ', isComplex(nul));
    
    let sym = Symbol(10);
    console.log(sym instanceof PrimitiveSymbol);    //true
    console.log('isComplex: ', isComplex(sym));
    
    console.log('isComplex: ', isComplex(isComplex)); //true
    

    相关文章

      网友评论

          本文标题:vue中nextTick()的使用理解

          本文链接:https://www.haomeiwen.com/subject/frfduqtx.html