Vuejs поля компонента класса не определены

Question

https://jsfiddle.net/78mLj9vb/

class App extends Vue {
    message = 'Hello!';
    shrek;//属性 property
    constructor(){
        super();
        this.shrek = "This is my swamp!";//代入-assignment
        //"This is my swamp!"がコンソールで出力されている　Prints as it should
        console.log(this.shrek);
        this.print();
    }

    print(){
        console.log(this.shrek);//[undefined]が出力されている Undefined printed to console
    }
}

Я учу Vuejs с компонентами класса и машинописью. Я не понимаю, почему я не могу получить доступ к полям моего класса в методах. Они всегда не определены. Я попытался выполнить начальное присваивание встроенному полю вместе с объявлением свойства, а также попытался выполнить присваивание в конструкторе. Я предполагаю, что это привязка данных Vuejs, которая искажает поля класса таким образом, что я не понимаю, я пытался получить к ним доступ через. $ Data безрезультатно. Я понимаю, что, вероятно, не очень хороший дизайн, чтобы иметь данные, которые не связаны с представлением в классе компонента, но на этот раз у меня нет базы данных, поэтому я пытаюсь жестко закодировать некоторые данные в метод класса, чтобы подделать их, поэтому что я могу затем l oop поверх данных w / v-for, чтобы создать список выбора. Я включил скрипку, которая не похожа на то, что я на самом деле пытаюсь сделать, но иллюстрирует «проблему» (мое отсутствие понимания на самом деле).

Как вы объявляете обычные поля класса за пределами Vuejs воли привязки данных c, или, альтернативно, как вы получаете доступ к данным, которые были связаны и изменены с помощью Vue?

Answer 1

После практики использования Vue в течение еще нескольких недель и исследования различных тем на inte rnet я пришел к выводу (что должно было быть для меня очевидно вначале), что ответом является использование только компонентов для каких компонентов хороши. То есть, если у вас есть какая-то логика c, которая получает грубый характер и вы хотите облегчить ее с помощью вспомогательных функций, эти вспомогательные функции могут быть объявлены вне класса как обычные функции и использоваться в коде компонента. Другим преимуществом этого подхода является то, что если несколько компонентов будут использовать вашу вспомогательную функцию или код инициализации, вы можете вместо этого переместить его в модуль машинописного текста или javascript и импортировать его в те компоненты, которые в нем нуждаются.

デ ー タ 初期 化 や 普通 の 論理 を 実 施 す る ヘ ル パ ー 関 数 を コ ン ポ ー ネ ン ト 内 に 置 く よ り 別 の 標準 な Машинопись や Javascript 関 数 に 置 い た 方 が 良 さ そ う で す .Vuejs の コ ン ポ ー ネ ン ト · ク ラ ス の 良 い 点 は смотреть 作 り だ け で вид と 関係 な い 論理 を コ ン ポ ー ネ ン ト 以外 に 置 く べ き で す. そ れ に そ う す る と そ の 論理 を 別 の フ ァ イ ル に 置 い て モ ジ ュ ー ル 形 で 複数 の コ ン ポ ー ネ ン ト は そ の 論理 を 使 え る よ う に な り ま す.

Answer 2

Для лучшего использования измените ваш код на:

//...
@Component({
  template: `
    <div>
    <h1>{{ message }}</h1>
    <h1>{{ shrek }}</h1>
    </div>

  `
})
class App extends Vue {
  data(){
    return {
       shrek: 'test',
       message: 'Hello world!'
    };
  }
  created(){
    this.shrek = "This is my swamp!";
    console.log(this.shrek);
    this.print();
  }

  print(){
      console.log(this.shrek);
  } 
}

new Vue({
  el: '#app',
  render: h => h(App)
})
//...

По вашей ссылке здесь