Uninitialized properties of a Vue instance should not be accessed

  • VUE_UNINITIALIZED_INSTANCE_PROPERTY
  • Error
  • Medium
  • vue

This rule applies when the uninitialized properties of a Vue instance are accessed.

In Vue's certain lifecycle methods, some properties are not yet initialized as follows:

  1. beforeCreate(): $data, $props, $el properties
  2. created(): $el property

Accessing uninitialized properties in the above lifecycle methods causes a TypeError exception or leads to an undefined behavior.

Noncompliant Code Example

View with compliant examples side by side
import Vue from 'vue';

Vue.component('hello', {
  data() {
    return { msg: 'hi' };
  },
  beforeCreate() {
    if (this.$data.msg === 'hi') { // VUE_UNINITIALIZED_INSTANCE_PROPERTY alarm because 'this.$data' property has not yet been initialized in 'beforeCreate()'.
                                   // A TypeError occurs because 'this.$data' is 'undefined'.
      // do something
    }
  },
  template: '<div>{{ msg }}</div>'
});

Compliant Code Example

View with noncompliant examples side by side
import Vue from 'vue';

Vue.component('hello', {
  data() {
    return { msg: 'hi' };
  },
  created() {
    if (this.$data.msg === 'hi') {
      // do something
    }
  },
  template: '<div>{{ msg }}</div>'
});

Version

This rule was introduced in DeepScan 1.15.0-beta.

See