setup 메소드와 옵션 메소드 꿀팁

    setup(){
      const todoItems = ref([]);

      //methods
      //외부에 영향을 주지 않고 독립적인 일을 해야한다. 
      //그러므로 바로 todoItems에 넣지않고 독립적인 array를 반환한다.
      function fetchTodos(){ 
        const result = [];
        for(let i = 0; i < localStorage.length; i++){
           const todoItem = localStorage.key(i);
           result.push(todoItem);
        }
        return result;
      }
      todoItems.value = fetchTodos();

      function addTodoItem(todo){
        todoItems.value.push(todo);
        localStorage.setItem(todo,todo);
      }

      return {todoItems,addTodoItem};
    },
    methods :{
      removeTodoItem(item,index){
        this.todoItems.splice(index,1);
        localStorage.removeItem(item);
      }
    },

setup을 사용한다고 해도 사실 methods를 사용할 수 있다. 여기에서 function을 치지 않아도 되서 훨씬 깔끔하다.. 그리고 ref로 정의한 setup의 data도 this로 접근이 가능하다는 사실..! 그래서 더 편하게 작성할 수도 있는 부분이 된다.

 

어느정도 methods 옵션을 사용하다가 너무 복잡해 질 경우 setup을 이용해 컴포지션 api를 사용해 보는 것이 좋다.