vue.js 입문자가 실무에서 주의해야할 5가지 특징

1. 반응성

 왜 내 화면은 다시 그려지지 않을까?

  -데이터의 변화에 따라 화면이 다시 그려지는 뷰의 성질

   data 안에 있는 값이 변화되었을때  화면이 변경된다.

 

  #반응성은 언제 설정될까?

   인스턴스가 생성될때 > data 속성들을 초기화

   만약 인스턴스가 생성된 후에

          data 내부에 속성을 새롭게 생성한다면

          그 값을 '변경해도 화면이 새로 그려지지 않는다'.

   그러면 어떻게 해야할까?

   쉽게하려면 create 단계에서 속성을 미리 생성해놓는다.

   또는 공식적으로 제공하는 reactivity 를 셋팅하는 방법을 사용하면 된다.

     |+|  this.$set ( this.someData[0], '속성값' ,false ) ( reactivity 동적셋팅)

 

  # VUEX 의 state 도 data와 동일하므로 조심하자.

2. DOM 조작

  #ref 속성 

    태그에 속성을 추가해놓으면 , 랜더링 할때 붙여주게 된다.

    이를 이용해서 내가 원하는 태그에 접근할 수 있다.

      |+| this.$ref.refdata[ ]

  #뷰 디렉티브

    v-for 로 index 만들고 - click 메소드에 넣어주기 

3. 라이프사이클

 new Vue()

  init ( Events/LifeCycle )

     -- beforeCreate --

  init ( Injections/reactivity )

     -- created --

      처음에 컴포넌트가 보여지게 될 때 ( 데이터는 이미 JS 상에 다 준비되어있지만, 화면에 그려지기는 전 ) 

    -- mounted -- 

      계산하고 나서 실제로 화면을 그리는데, 화면을 그릴때 mounted 가 실행된다.

      (화면이 나타난 후, 그러므로 시간이 오래걸리는 Http통신들은 마운티드에 하는게 좋다.)

      ( DOM 이 생긴 후이다. ) 

      ( 이미 그려진 화면을 변경해주고 싶을땐, 여기서하자 )

   -- beforeupdated -- 

      그려진 화면을 변경하기 직전 

   -- updated -- 

      그려진 화면을 변경한후,