이 기사는 Vue입니다.js#2Advent Calendar의 2018년 13일째 보도입니다.
지금 업무상 Vue가 있습니다.js+Type Script를 사용하여 프런트를 구성합니다.
그중에서 비교적 소박한 부분을 소개한다.
한마디로 "TypeScript로 반을 발표할 때 필드를 초기화하지 않으면 Vue.js에서 활동을 회복할 수 없습니다."

문제 코드

끼워 넣을 때의 코드는 다음과 같은 느낌의 코드입니다.

<template lang="pug">
v-app#app
  v-toolbar(app color="primary" dark)
    v-toolbar-title Vue.js #2 Advent Calendar 2018
  v-content
    v-container(grid-list-md)
      v-layout(row wrap)
        v-flex(xs12)
          v-card
            v-card-title カウンター
            v-card-text {{ state }}
            v-card-actions
              v-spacer
              v-btn(@click="up()" flat color="primary") count up
</template>

<script lang="ts">
class CounterState {
  name = "CounterState";
  count: number;
}

const state = new CounterState();

new Vue({
  el: "#app",
  data: () => ({
    state,
  }),
  methods: {
    up() {
      this.state.count++;
    }
  }
})
</script>

움직여 보면 알겠지만 버튼을 눌러도 화면이 업데이트되지 않는다.(비활성화)
왜?

까닭

찾아보니 Type Script를 JavaScript로 변환한 결과는 인상과 다르다, Vue.문제는 js가 값의 변경을 감지하지 못했다는 것입니다.

Vue.js의 제약

Vue.js는 초기화할 때 필드가 없으면 활성화할 수 없는 제한이 있습니다.
속성 선언 - Vue가 활성화되었습니다.js
Vue에서는 새 루트 레벨의 활동 속성을 동적으로 추가할 수 없으므로 인스턴스를 초기화할 때 모든 루트 레벨의 활동 데이터 속성을 미리 선언해야 합니다.빈 가격도 괜찮아요.
베입니다.만약 js를 사용한다면 나는 첫 번째 방면의 제약에 부딪힐 것이라고 생각한다.
객체에 새 필드를 추가할 때는 Vue.set(target, key, value)를 사용해야 합니다.

Type Script에서 JavaScript로 전송

이번 예에서는 중계 결과count장이 존재하지 않아 원활하게 가동되지 못했다.
실제 중계CounterState 부분의 결과는 다음과 같다.

var CounterState = /** @class */ (function () {
    function CounterState() {
        this.name = "CounterState";
    }
    return CounterState;
}());
var state = new CounterState();

count 깨끗하지 않아요.
(필드만 정의하면 null의 자바 뇌에 들어갈 수 있습니다.)

기타 모드

TypeScript 초기화의 예를 몇 개 들었습니다.
JavaScript로 변환하면 어떻게 될까요?

interface Counter {
  count: number;
}

class CounterNone implements Counter {
  count: number;
}

class CounterNull implements Counter {
  count: number = null;
}

class CounterUndefined implements Counter {
  count: number = undefined;
}

class CounterDefault implements Counter {
  count: number = 0;
}

class CounterConstructor implements Counter {
  count: number;
  constructor() {
    this.count = 0;
  }
}

각 단계의 차이는 count 필드 설정이 다르다는 데 있다.
결과는 다음과 같다.

var CounterNone = /** @class */ (function () {
    function CounterNone() {
    }
    return CounterNone;
}());
var CounterNull = /** @class */ (function () {
    function CounterNull() {
        this.count = null;
    }
    return CounterNull;
}());
var CounterUndefined = /** @class */ (function () {
    function CounterUndefined() {
        this.count = undefined;
    }
    return CounterUndefined;
}());
var CounterDefault = /** @class */ (function () {
    function CounterDefault() {
        this.count = 0;
    }
    return CounterDefault;
}());
var CounterConstructor = /** @class */ (function () {
    function CounterConstructor() {
        this.count = 0;
    }
    return CounterConstructor;
}());

Vue.js에 놓을 때의 샘플을 만들어 보았습니다.
See the Pen Vue TypeScript Reactivity by totto357 ( @totto357 ) on CodePen .

어때요?

Vue.js를 사용할 때 초기화하십시오.(경계로 삼는다)