05.08.2022-1 TIL

😸 Vue TIL

😽 Done it

😼 Proxy

data

• 불변성을 위해 주로 일반 함수로 작성을 합니다.

Proxy
: 기본적인 동작의 새로운 행동 정의
: 특정 data가 언제 조회되고 할당되는지 감시하여 중간에 logic 추가

const app = {
  data: function() {
    a = 0;
  }
}

// new Proxy(target, handler)
const proxyA = new Proxy(app.data, {
  get(target, key) {
     //값 조회
  }
  set(target, key,value) {
     //값 지정 및 할당
  }
})

😼 computed, watch

computed
: 공통된 함수를 사용할 때 캐싱하여 1번만 실행하고 가져다 쓰는 곳(낭비 x) but methods에서는 계속 실행 된다.
=> 계산된 data

computed: {
  함수: {
    get() {
      //조회
    },
    set() {
      //지정 및 할당
    }
  }
}

watch
: 반응형 data를 감시하여 data가 변경되면 해당 data가 있는 함수가 동작한다.
즉, data가 바뀌면 해당 data가 있는 함수 실행
=> 감시 option

watch: {
  data(newValue, oldValue) {
  }
}

but
data의 속성만 바꾸면 감시 못함 => deep
초기화시 즉시 실행 => immediate

watch: {
  data: {
    handler(newValue, oldValue){

    },
    deep: true,
    immediate: true
  }
}

😼 클래스와 스타일 바인딩

() X
=> 하나의 method만 binding 할 수 있다.
=> @evet를 하면 실행되는 구조

() O
=> js표현식이 되면서 @event 할 때 표현식이 실행하는 구조
=> 여러개 작성 가능

< :class="{ class이름: isActive }">

const App = {
  data() {
    return {
      isActive: false
    }
  }
}

//속성과 data이름 같으면 생략 가능합니다.

< :class="{ class이름 }">

const App = {
  data() {
    return {
      class이름: false
    }
  }
}

// 객체 리터럴을 이용하기 위해서는 계산된 data(computed)를 사용해야 합니다.

< :class="classObejct">

const App = {
  data() {
    return {
      active: false,
      small: true,
    }
  },
  computed: {
    classObject() {
      return {
        active: this.active,
        'title--small color--orange': this.small
      }
    }
  }

}

// 배열 리터럴 이용(여러개 사용할 때)

< :class="[active, title]"
  @click="changeTitle">

const App = {
  data() {
    return {
      active: 'active',
      title: 'title'
    }
  },
  methods: {
    changeTitle() {
      this.actie = 'active-change'
    }
  }
}

 

😺 Feeling

TIL도 조금 밀렸다. 

좀 더 참고 해보자.

 

📖 REF

프로그래머스 데브코스
https://v3.ko.vuejs.org/guide/introduction.html