[Vue] computed, methods

 

 

 

export default {
  name : 'ReverseData',
  data() {
      return {
        msg : '퇴근,,하고싶다',
        isDone : false,
      };
  },
  computed : {
    reversString() {
    console.log("computed 실행합니다.");
    return this.msg.split('').reverse().join('');
    }
  },
  methods : {
    changeMsg() {
    console.log("method 실행합니다.");
    if(this.isDone) this.isDone = false;
    else this.isDone = true;
    }
  }
};
</script>

<style>
  p {
    padding : 10px;
    text-align: center;
    font-size : 20px;
  }
  button {
    display: block;
    margin: 0 auto;
  }

---

console에 보면 methods와 computed가 출력되었다는 로그가 찍힌다.

다만, computed는 버튼을 최초로 클릭했을 때, 한 번만 출력되고

그 후에는 method만 출력이 된다.

computed는 연결된 data값이 변경되지 않으면, 호출하지 않는다.

 

computed는 연결된 데이터 값이 변경되었을 때에, 계산식을 계산해서 캐싱(값을 잠시 저장)하여 리턴해주는 속성

 

computed는 반드시 return값이 존재해야함

매개변수를 받을 수 없음

연결된 data가 변경되었을 경우에만 계산

 

methods

명시적으로 호출될 때에 실행

매개변수를 받을 수 있음

 

---