vue2 watch, computed

vue2에서 watch,computed, methods 사용법을 알아보자

methods

사실 methods를 사용하면 되지만, 이렇게되면 다른 작업을 할 때도 vue가 실행이 되기 때문에
굉장히 비효율적이다. 따라서 computed를 사용하는게 조금 더 유리하다고 볼 수 있다.

  methods:{
    fullname(){
      console.log('hi')
      if(this.name || this.lastName === ''){
        return ''
      }
      else{
       return this.name + ' ' + this.lastName
      }
    },
  }

watch

html
<input v-model="test">
<p> watch : {{test}} </p>


js

data(){
  
 return{
   
test:'',
   
 }
}


watch:{
 test(){
  console.log('test작동중') 
 }
  
}

---

computed

예시 1)

computed:{

  fullname(){
  console.log('running again')
    return this.name + ' ' + this.lastName
 
},

예시2)

data에서 굳이 result를 return 할 필요 없음

<p>Result : {{result}} </p>  
  
computed:{
result(){
  if(this.number < 37){
    return 'not yet'
  }else if(this.number === 37){
  return this.number}
  else{
    return 'Too Much'
  }
}
}
  

예시3)

html
<p> 
 <button @click="toggleTastk"> {{buttonCaption}} </button>
</p>



js
handler : true



computed:{
 buttonCaption(){
  return this.handler ? 'Hide computed ' : 'Show computed' 
   
 }
  
  
}