[Vue] 심화

computed vs watch

computed

종속된 데이터가 변경될 때 자동으로 다시 계산되는 속성을 정의할 때 사용

watch와 다르게 데이터 값의 변경이 일어나지 않더라도 최초에 정의된 함수가 실행됨.

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

watch

정의된 데이터 값 하나만을 감시

computed와 다르게 실제 변경이 일어나기 전까지 실행되지 않음.(값이 할당되지 않음)

 

props로 객체 전달

props: {
    // 기본 타입 체크 ('null'과 'undefined'는 모든 타입 유효성 검사를 통과합니다.)
    propA: Number, // Number 타입 체크
    propB: [String, Number], // 여러 타입 허용
    propC: { // 문자열이고 부모 컴포넌트로부터 반드시 데이터가 필수로 전달되어야 함
        type: String,
        required: true
    },
    propD: { // 기본 값(100)을 갖는 숫자형
        type: Number,
        default: 100
    },
    propE: { // 기본 값을 갖는 객체 타입
        type: Object,
        // 객체나 배열의 기본 값은 항상 팩토리 함수로부터 반환되어야 합니다.
        default: function() {
            return { message: 'hello' }
        }
    },
    propF: { // 커스텀 유효성 검사 함수
        validator: function(value) {
            // 값이 꼭 아래 세 문자열 중 하나와 일치해야 합니다.
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    },
    propG: { // 기본 값을 갖는 함수
        type: Function,
        // 객체나 배열과 달리 아래 표현은 팩토리 함수가 아닙니다. 기본 값으로 사용되는 함수입니다.
        default: function() {
            return 'Default function'
        }
    }
}

provide/inject

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위한 수단으로, 상위 컴포넌트에서 데이터를 제공(provide)하고, 하위 컴포넌트에서 이를 주입(inject) 받아 사용.

리액트로 치면 context api

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    const message = 'Hello from parent';
    provide('message', message);	// 키, 값
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}
</script>

mixins

여러 컴포넌트 간에 재사용 가능한 기능을 공유할 수 있는 방법

mixin 파일 정의

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'This is data from mixin'
    }
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from mixin');
    }
  }
}

mixin 사용

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Call Mixin Method</button>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin],	// 사용할 믹스인 파일을 배열로 등록
  data() {
    return {
      localData: 'This is local data'
    }
  },
  methods: {
    localMethod() {
      console.log('This is a local method');
    }
  }
}
</script>

마운트, 언마운트

mixin파일에 mount, unmount를 설정하면 사용하는 컴포넌트에서 마운트, 언마운트에 컴포넌트에서 설정한 작업보다 먼저 실행됨.

// myMixin.js
  mounted() {
    console.log("믹스인 mounted");
  },
  unmounted() {
    console.log("믹스인 unmounted");
  },

// 컴포넌트
  mixins: [myMixin],
  mounted() {
    console.log("컴포넌트 mounted");
    // 믹스인 mounted
    // 컴포넌트 mounted
  },
  unmounted() {
    console.log("컴포넌트 unmounted");
    // 믹스인 unmounted
    // 컴포넌트 unmounted
  },

전역 파일로 등록

main.js에 추가하여 전역 파일로 등록할 수 있음

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { myMixin } from "./asdas"

createApp(App).mixin(myMixin).mount('#app')

Composition API에서의 mixin

유틸 함수처럼 좀 더 간단하게 사용할 수 있음

import { ref } from 'vue';

export function useMyComposable() {
  const mixinData = ref('This is data from composable');
  const mixinMethod = () => {
    console.log('This is a method from composable');
  };
  
  return { mixinData, mixinMethod };
}

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Call Composable Method</button>
  </div>
</template>

<script>
import { useMyComposable } from './useMyComposable';

export default {
  setup() {
    const { mixinData, mixinMethod } = useMyComposable();
    
    return { mixinData, mixinMethod };
  }
}
</script>