👒 Vue 3. The composition API

Vue 3에서 새로 등장한 The composition API에 대해 알아보자.

import getPosts from './getPosts'
export default{
setup(){
// data
//methods
//computed
//lifecycle hooks
const data=getPosts()
}
}

1.Group logic together in a setup function
2.Easily create reusable logic(Functions)

예시 코드를 살펴보자.

<template>
<div class="home">
home
<p ref='p'>My name is {{name}} and my age is {{age}}</p>
<button @click="handleClick">click me </button>
<input type='text' v-model='name'> //인풋에 작성하는대로 name이 변경된다
</div>
</template>
<script>
import {ref} from'vue'
export default{
  name:'Home',
  //setup() is always runs first before created and mounted..
  setup(){
  console.log('setup')
  const p = ref(null)
  console.log(p,p.value)
  
  //These are not reactive by default
  let name='mario'
  let age=30
  //we can use refs to create reactive values!
  const name=ref('mario')
  const age=ref(30)
  
  const  handleClick=()=>{
  console.log(p,p.value);
  p.value.classList.add('test')
  p.value.textContent='hello,ninjas';// 버튼 누르면 p 내용의 값이 바뀐다.
  //name과 age의 값이 변경된다(버튼 누르면)
name.value='loco'
age.value=29 
  }
  return {name,age,handleClick,p}
  }
  }
  </script>

👒 Refs vs Reactive

<template>
  <div class='home'>
   <h1>Home</h1>
   <h2>Refs</h2>
  <p> {{ninjaOne.name}}-{{ninjaOne.age}}</p>
  <button @click='updateNinjaOne'>Update ninja one</button>
<h2>Reactive</h2>
<p>{{ninjaTwo.name}}-{{ninjaTwo.age}}</p>
<button @click="updateNinjaTwo">Update ninja two</button>
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
  name:'Home',
  setup() {
    const ninJaOne=ref({name:'mario',age:30})
    const ninjaTwo=reactive({name:'luigi',age:34})
    
    const nameOne=ref('mario')
    const nameTwo=reactive('luigi');
    //luigi값은 primitive value이기에 업데이트 되지 못한다.
    const updateNinjaOne=()=>{
      🍏 ninjaOne.value.age=40
    }
    const updateNinjaTwo=()=>{
      🍏 ninjaTwo.age=45
         nameTwo='mario' // 전혀 업데이트 되지 않는다.
       
    return{ninjaOne,updateNinjaOne,ninjaTwo,updateNinjaTwo}
  }
}

ref를 사용할 때는, 값에 접근하기 위해 value를 항상 적어줘야했다.
그러나reactive를 사용할 때는 value를 사용할 필요없다.
둘 중에 무얼 쓰는 것이 좋은가?reactive는 값을 업데이트하기 어렵다. 여러이유로 ref를 사용하는 것이 더 좋다

👒 Computed values

<template>
  <div class='home'>
    <h1>Home</h1>
    <input type='text' v-model='search'>
     <p>search term - {{search}}</p>
    <div v-for="name in matchingNames" :key="name">{{name}}</div>
  </div>
</template>
<script>
    import {computed,ref} from'vue'
export default {
  name:'Home',
  setup(){
    const search=ref('')
   const names=ref(['mario','yoru','luigi','tod','peach'])
   const matchingNames = computed(()=>{
     return names.value.filter((name) => name.includes(search.value))
                                      
   })
    return {names,search}
  }
}
</script>

👒 Using props in setup

<template>
  <div class="home">
    <h1>Home</h1>
  🍇 <PostList v-if='showPosts' :posts='posts' />
    //만약 showPosts가 false이면 이 컴포넌트는 언마운트되어서 안보이게 될 것이다.
    <button @click='showPosts =!showPosts'>toggle posts</button>
<button @click="posts.pop()"> delete a post </button>
 </div>
</template>
<script>
      🍇 import PostList from '../';
   import {ref} from 'vue'
  export default {
    name:'Home',
     🍇 components:{PostList},
    setup(){
      const posts = ref([
        {title:'welcome',body:'lorem',id:1},
        {title:'top 5 tips', body:'Lorem',id:2}
        ])
      const showPosts = ref(true)
      return {posts,showPosts}
    }
  }
</script>

==PostList.vue===

<template>
  <div class='post-list'>
    <div v-for='post in posts :key='post.id'>
     <h3>{{post.title}}</h3>
    </div>
 </div>
</template>
<script>
 export default {
  props:['posts'],
  setup(props) {
    console.log(props.posts)
                }
                }
</script>

👒 Lifecycle hooks in setup

<template>
  <div class='post-list'>
    <div v-for='post in posts :key='post.id'>
   <SinglePost :post='post'/>
    </div>
 </div>
</template>
<script>
 import { onMounted , onUnmounted,onUpdated} from 'vue'
 import SinglePost from './SinglePost.vue'

 export default {
  props:['posts'],
   components:{SinglePost},
  🍈 setup(props) {
     onMounted(()=>console.log('component mounted')
     onUnmounted (()=>console.log('component unmounted')
      onUpdated(()=>console.log('component updated'))
                }
                }
</script>

👒 Fetching data in setup

<template>
  <div class='home'>
    <h1> Home</h1>
  <div v-if='error'>{{error}} </div>
<div v-if="posts.length'>
   <PostList :posts='posts' />
     </div>
<div v-else > Loading...</div>
   </div>
</template>

<script>
import PostList from '../'
import {ref} from 'vue'

export default {
  name:'Home',
  components:{PostList},
  setup(){
    const posts=ref([])
    const error=ref(null)
    🕹 const load=async()=>{
      try{
        let data= await fetch('http://localhost:3000/posts'
                             )
        if(!data.ok){
          throw Error('no data available')
        }
        posts.value = await data.json()
      catch(err){
        error.value=err.message
        console.log(error.value)
      }
    }
      load();
    return {posts,error}
    

👒 Composition API & TypeScript

<template>
  <div class='app'>
    <p> {{ jobs[0]/location</p>
   </div>
 </template>
<script lang='ts'>
  import {defineComponent,reactive,toRefs,ref} from 'vue';
  im
  import Job from './types/Job';
  export default defineComponent ({
    name:'App',
    components:{},
    setup(){
      //const state = reactive ({
        //name:'Link',
        //age:25 as string | number <Type Assertion>
     // })
      //state.name =99999 //cannot change type
      //If I change the name as a number,this is not gonna work.
      //state.age='26'
      //return {...toRefs(state)}
      
      const name = ref('Link')
      const age = ref<number|string>(25); //we can use generic arguments instead of using type assertion
      age.value=26 가능
      age.value='26'가능해짐
      
      return {name,age}
      
      const jobs=ref<Job[]>([
        {title:'farm worker',location:'London' salary:30000,id:'1'}
           {title:'lawyer',location:'Newyork' salary:40000,id:'2'}
       {title:'engineer',location:'Paris' salary:30000,id:'3'}
        ])
        return {jobs}
      },
    
    methods:{
      changeName(name:string){
        this.name =name
        return name
      },
      changeAge(age:string|number){
        this.age = age
        return age
      }
    }
  });
</script>

====Job.ts==============

interface Job {
 title:string,
 location:string,
 salary:number,
 id:string
}
export default Job

참고:Youtube_The Net Ninja