[220628]

composition API

• 코드의 성격에 따른 구조로 나누어 쓸 수 있다.
• 컴포넌트를 가지고만 오면 자동으로 등록되고 사용 가능.
• import { defineComponent } from 'vue'
• 스크립트 부분의 코드만 다를뿐
• this 사용하지 않음
• 최상위에서 변수를 만들면 템플릿에서 사용가능
• created 와 beforecreated 가 없음 (lifecycle은 존재)

ref

• 반응형을 위해

• 객체 데이터 타입 -> 값이 있는 곳은 value

  import { ref } from 'vue'
  const counter = ref(0)
  
  console.log(counter) // { value: 0 }  
  console.log(counter.value) // 0
  
  counter.value++  
  console.log(counter.value) // 1

  plugin

watch

• watch( 감시해야 하는 대상, 콜백)

• 감시해야하는 대상은 값이 아니라 ref 객체여야 함

  watch(
  //값일때는 콜백의 리턴으로 해줘야함!
  ()=> workspaceStore.workspacesLoaded,
  loaded => {
    loaded && workspaceStore.findWorkspacePath(currentWorkspaceId.value)
  }) 
  watch(route,()=> {
  workspaceStore.findWorkspacePath(currentWorkspaceId.value)
  })

• 공식 문서 읽어보기