vue3 새로 추가된 기능

목차
1) Teleport 기능
2) Composition API

---

1) Teleport 기능
react의 portal과 비슷한 기능.
child component를 teleport 태그로 감싸, 어떤 태그(css 셀렉터)안에 렌더링 될지 정할 수 있다.
기존 vue2에서 부모 컴포넌트 내부에 어느 위치에 컴포넌트를 놓았는지에 따라 그 위치에 바로 적용 되었었지만,
teleport기능을 사용하면, 실제 자식 컴포넌트를 부모컴포넌트 파일 내 어디에 놓던지 크게 상관없게 됨.

=> 이로 인해 nested 되어 생성되던 기존 자식 컴포넌트 렌더링 방식 보다, 좀 더 semantic 하게 코드를 짤 수 있다고 한다.
고로, multiple root component를 내부에 추가할 수 있게 되었다.

 

2) Composition API (Optional)

기존 Vue2에서 Data, Methods, Computed, Watch를 Vue Component 내부에 설정하여 사용하던 것을
그대로 Vue3에서 사용할 수 있다.
But 이 부분에 대한 다른 대체제가 생김. => 'Composition API'

// 기존 방식
{
	data() {
    	return { name: 'name' }
    },
    methods: { doSth() {...} }
}

// Composition API
{
	setup() {
    	const name = ref('name');
        function doSth() {...}
        return {name, doSth }
    }
}

*** setup()은 Vue.component로 인해 자동으로 호출된다. Vue LifeCycle 중 created()에 해당되는 호출 순서와 동일.

Composition API 적용 시
- data

import { ref } from 'vue';
//ref는 reactive piece of data
//ref를 통해 vue가 변경이 일어났다는 것을 인식 할 수 있는 변수를 만들 수 있다.

export default {
    setup() {
    	const goals = ref([]);
        //const로 array를 만들어도
 		//wrapper를 변경하지 않고, 내부 element를 수정하는것은 가능.
    }
}

 

*** ref사용 시 read, write을 위해서는 '. value'를 통해 해야 한다 =>  '변수이름.value' 

- Computed Object

setup() {

	const computedFunctionName = computed(function() {
    	...
    	return result;
    }
    
    return { //여기에 return해주면, template에 exposed된다.
    	computedFunctionName: computedFunctionName
    };

}

- setup에서 context를 받아서 사용하기

 

setup(_, context) { //props를 사용하지 않을거라면 '_'로 첫번째 파라미터 세팅
	const enteredText = ref('');
    const invalidInput = ref(false);
    
    function addTodos() {
    	invalidInput.value = false;
        if(enteredText.value === "") {
        	invalidInput.value =true;
            return;
        }
        context.emit("add-todos", enteredText.value);
        enteredText.value = '';
    }

	return {
    	enteredText,
        invalidInput,
    	addTodos
    }
}

 

- watch 
watch는 두 개의 input을 받는다.

import { ref, watch } from 'vue';

setup(_, context) {
	const enteredText = ref('');
    const invalidInput = ref(false);

	watch(invalidInput, function(val)){
    	if(val) {
        	console.log("Invalid Input");
        }
    });
    
    ...
    
    return {
    	enteredTest,
        invalidInput,
        ...
    }
}

 

Composition API, Options API는 한쪽만 써야 하는 것이 아닌, 같이 쓰거나 특정 파일에만 도입할 수도 있다.
물론, 한 파일 내에서 두 가지 경우를 같이 쓰는 경우, 서로 상호작용이 원활하게 되지 않을 수도 있다는 점은 유의해야 한다.
migrate 할 경우, 한 파일 내부를 다 migrate 하는 것에 더 나을 수 있음.

유의사항

setup() 내부에서는 'this'를 아직 읽어올 수 있는 단계가 아님.
대신 props가 필요한 경우는 setup(props)와 같이 파라미터로 받아와서 사용가능하다.

---

Vue 3는 Vue2보다 TypeScript와 합이 잘 맞아, 일반적으로 TypeScript와 함께 사용하는 경우가 많다.
But, 꼭 해야 하는 것은 아님!