vue - 반응형 기초

1. 반응형 상태 설정 

 

script안의

data(){} 보관함을 통하여 상태를 선언및 저장한다. (state처럼 this를 통하여 변경가능)

 

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted`는 나중에 설명할 생명 주기 훅입니다.
  mounted() {
    // `this`는 컴포넌트 인스턴스를 나타냅니다.
    console.log(this.count) // => 1

    // 값을 변경할 수 있습니다.
    this.count = 2
  }
}

 

메서드를 통해서 함수를 사용할 수 있다.

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 메서드는 생명 주기 훅 또는 다른 메서드에서 호출할 수 있습니다!
    this.increment()
  }
}

 

메서드안에서 data의 state를 바꾸고싶다면,

무조건 this를 통해서 바꿔야한다. :: 완전중요:: 화살표함수의 this 같은경우는 state에 접근할수없음.

그렇기에 화살표함수를 사용하지않는다.

 

리액트와 마찬가지로 , dom업데이트는 동기적으로 진행되지않는다. (리액트의 배칭이랑 비슷한 느낌.?)

상태관리후에 dom 업데이트 까지 기다리려면 nextTrick() api를 사용해야한다고 한다. 

 

export default {
  created() {
    // 이제 각 인스턴스는 자체적인 디바운스된 핸들러를 가집니다.
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 컴포넌트가 제거된 후 
    // 타이머를 취소하는 것은 좋은 방법입니다.
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 클릭에 응답 ...
    }
  }
}

이벤트 등록시에, 생명주기 메소드를 활용하여 사용한다.

(useEffect나, 앵귤러 ngOninit등에서 리사이즈 등록해서 사용하는 이벤트와 비슷 )