vue Option-3 정리(methods vs computed vs watch)

methods

type:{ [key: string]: Function }

Ex>

import { Vue } from "vue-class-component";
export default class Home extends Vue {
	methodsCount() {
	      console.log("methods");
	      return this.countMethods;
	    },
}

import { Vue, Options } from "vue-class-component";
@Options({
  methods: {
    methodsCount() {
      console.log("methods");
      return this.countMethods;
    },
  },
})
export default class Home extends Vue {}

 

 

computed

type:{ [key: string]: Function | { get: Function, set: Function } }

Ex>

import { Vue, Options } from "vue-class-component";
@Options({
  computed: {
    computedCount() {
      console.log("computed");
      return this.countComputed;
    },
  },
})
export default class Home extends Vue {}

 

watch

type:{ [key: string]: string | Function | Object | Array}

• {string | Function} source //함수설정 및 methods에 있는 함수 가져오기
• {Function | Object} callback //콜백함수 설정
• {Object} options (optional)
  • {boolean} deep //object 포함된 맴버변수(?)같은 변수가 가지고 있는 값의 변화를 감지할때 사용..? (그럼 그냥 쓰면 어케되지?)⇒ 딱히 상관 없이 작동된다!
  • {boolean} immediate //랜더링시 즉시 호출여부
  • {string} flush // 랜더링 타이밍을 지정한다 딱히 상관은 없어 보이지만immediate 이것과 함깨쓰일것 같다
  • 기본값이 pre

역할

    찰할(watch) 표현식을 키(key)로, 해당하는 콜백을 값(value)으로 가지는 객체입니다.

import { Vue, Options } from "vue-class-component";
@Options({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 'test',
      f: 5
    }
  },
  watch: {
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 문자열 메소드명
    b: 'someMethod',
    // 지켜보는 객체의 모든 (깊이에 상관없이) 프로퍼티의 변경이 발생하면 콜백됩니다. 
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 관측이 시작하자마자 우선 콜백이 호출됩니다. 
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 콜백 목록을 줄수 있고, 하나하나 실행됩니다. 
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  }
})
export default class Home extends Vue {}

 

computed vs methods

특징:

1. template에서 호출시 ()를 적지 않아야 된다.
2. return 값이 반드시 존재해야한다.

3, 파라마터를 받을 수 없다.(보통의 경우에서)

methods vs watch

computed - 특정 값을 계산해서 보여준다.

watch - 특정 값의 변동해서 다른 작업을 한다.

 

참고자료

데이터 | Vue.js