-
Request For Comments Document for Functional Component in Vue : 현재 최종 PR전 의견 취합 단계. 아직 정식 릴리즈는 아니고
vue-next로 릴리즈 전 프리뷰 단계에 해당. -
이번 네이버 DEVIEW에서도 발표 주제에 포함
-
RFC: ECMAscript Technical Committee의 proposal /w actual code → review → release의 의사결정 단계를 흉내낸 것으로 보임. 대규모 인원 작업시에 이점 예상
-
추가적인 문서작업을 요구하므로 일의 중요도를 고려하지 않고 사용했을 때 오히려 작업속도가 정체될 가능성. Agile이나 Waterfall을 잘못 이해하고 실천했을 때, 꼭 알려진 대로 효율성을 끌어올리기보다 스트레스로 인한 구성원들의 반목을 야기하듯이. 프로세스 그 자체보다 팀원들의 협업 마인드가 중요하고, 태스크를 한눈에 보기 힘든 팀에서 사용하기 알맞은 방식이라고 볼 수 있음.
- 기존
2.x대의 기능은 한동안 그대로 유지됨. backward compatibility는 큰 이슈가 아닐 것으로 예상.
No. The new API is 100% compatible with current syntax and purely additive. All new additions are contained within the new
setup()function. Nothing is being removed or deprecated (in this RFC), nor do we have plan to remove / deprecate anything in the foreseeable future. (A previous draft of this RFC indicated that there is the possibility of deprecating a number of 2.x options in a future major release, which has been redacted based on user feedback.)
- 기존 Vue Instance 안에
setup()프로퍼티가 새로 생겨서 React처럼 functional component 를 작성할 수 있게 됨. 모양새는 마치 react hook과 유사하지만 svelte 처럼 간단한 구문으로 되어있어 사용하기 쉬워보임. 실제로 react hook에서 상당수 영감을 받았다고 함.
import { value, computed, watch, onMounted } from 'vue'
const MyComponent = {
props: { /* ... */ },
data: () => ({ /* ... */ }),
beforeCreate() {
onMounted(() => {
/* hook can be placed inside another lifecycle!! */
})
},
setup(props, context) {
/* context `this` NOT available from here */
/* hooks available from here */
// context === outside VM
context.attrs
context.slots
context.refs
context.emit
context.parent
context.root
// reactive state
const count = value(0)
// computed state
const plusOne = computed(() => count.value + 1)
// method
const increment = () => { count.value++ }
// watch
watch(() => count.value * 2, val => {
console.log(`count * 2 is ${val}`)
})
// lifecycle
onMounted(() => {
console.log(`mounted`)
})
// expose bindings on render context
return {
count,
plusOne,
increment
}
}
}- 최근에 브라우저들이 지원하는 proxy API 를 사용하여 값의 동적 변화를 추적하기 때문에 속도가 더욱 빨라진다고 함.
- 실제 퍼포먼스 테스트를 해봤을 경우 callback 기반의 값 추적보다 크게 빠르지는 않음. performance test link
- 프로퍼티를 좀더 세세하게 추적하는 기능도 없음.
- 아마도 Evan You(Vue 개발자)의 주장은 proxy API를 통해서 좀더 간결한 코드를 작성했다는 것인 것 같음
- Proxy API 자체는 ECMA 2015부터 추가되었으므로 역사 자체는 오래되었으나, 최근까지도 polyfill 없이는 동작이 불가능한 경우가 있었음. 지금은 크롬브라우저가 대세가 되면서 신규 기능도 안전하게 사용가능하다고 판단되어 해당 기능을 추가한듯 함.
- Dependency Injection 기능을 사용하여 완전히 다른 컴포넌트간에서 store를 사용하지 않고 값을 주입할 수 있게 됨
import { provide, inject } from 'vue'
const CountSymbol = Symbol()
const Ancestor = {
setup() {
// providing a value can make it reactive
const count = value(0)
provide({
[CountSymbol]: count
})
}
}
const Descendent = {
setup() {
const count = inject(CountSymbol)
return {
count
}
}
}- 2.x vs 3 단순 코드 비교 : svelte에 좀 더 가까운 모양새가 됨.
- 현재 상황에서 기존 코드에서 변경할 것은 없어 보임
- Vue3 마이그레이션이 있을 경우 신규 코드는 react 최근 트렌드 처럼 function component로 작성
- svelte처럼 효율성을 중시한 코드가 트렌드임을 재확인