vue中nextTick()的使用理解

2019-03-01  本文已影响0人  zhaur

是当接收数据后,需要重新调用刷新该界面数据,在官网在的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
上一篇 下一篇

猜你喜欢

热点阅读