[Nuxt.js/Vue.js] Vue의 변경 사항을 감지할 수 있습니다.

변량

우선 당연한 것이고, 변수에 직접적인 변경이 있으면 검출할 수 있다.
변수가 값을 대입할 때마다 화면의 표시 내용에 자동으로 반영됩니다.

<p>{{ hoge }}</p>

this.hoge = 'hoge'

배열

감지할 수 없는 방법

배열 요소의 변경 사항을 감지할 수 없습니다.예를 들어 다음과 같이 추가 글자로 대입을 지정하는 방법은 화면을 업데이트하지 않는다.

<p>{{ hoge }}</p>

this.hoge[0] = 'hoge'

감지할 수 있는 방법

Vue에서 제공하는 this.$set()를 사용하여 배열 요소를 대입하면 가 감지됩니다.

// 引数: 変更対象の配列, インデックス, 代入する値
this.$set(this.hoge, 0, 'hoge')

이외에 아래 수조의 변경 방법의 업데이트를 측정할 수 있다.push() pop() shift() unshift() splice() sort() reverse()

this.hoge.push('hoge')

대상

감지할 수 없는 방법

속성 추가를 감지할 수 없습니다.예를 들어 다음과 같이 데이터 대상에 대입된 정의되지 않은 속성은 화면에 반영되지 않는다.

<p>{{ hoge }}</p>

data () {
  return {
    hoge: {}
  }
}

this.hoge.name = 'taro'

감지할 수 있는 방법

수조와 마찬가지로 this.$set()로 속성을 추가하면 검출할 수 있습니다.

// 引数: 変更対象の配列, key値, 代入する値
this.$set(this.hoge, 'name', 'taro')

또한 데이터 대상에 표시된 속성이라면 일반적인 대입에서도 변경이 감지됩니다.

data () {
  return {
    hoge: { name: null }
  }
}

this.hoge.name = 'taro'