Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- tiptap
- vite이미지캐싱
- fastapi router
- 파이썬 경로추가
- springboot dynamic scheduler
- vue2.7
- vue3
- mock service worker
- vue3이미지캐싱
- spring 동적 스케줄러
- vue composable
- store router
- spring dynamic scheduler
- fastapi 라우터
- python path
- threadpooltaskscheduler
- vue mixin
- branch 이름 변경
- mockserviceworker.js
- 프로필이미지캐싱
- aws mariadb
- aws db 생성
- msw
- vite.config.js
- vite
- pinia
- tiptap 에디터
- tiptap vue3
- tiptap custom command
- tiptap slash command
Archives
- Today
- Total
gomstory
Vue2.7 Mixin -> Composable 본문
회사에서 Vue2.x 프로젝트를 Vue3(3.3.4)로 마이그레이션하는 작업을 진행하고있다.
Mixin을 남발하는 프로젝트가 하나 있어서 Composition API로 전환하기 위해 테스트를 해봤다.
https://vuejs.org/api/composition-api-setup.html
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
대충 구글링하고 냅다
npm install @vue/composition-api --save
했는데 오류남

치기 전에 생각하자.
기존 Mixin 코드
<template>
<div>
<button @click="testFunc">
mixin test
</button>
</div>
</template>
<script>
import mixinTest from "@/mixin/mixinTest"
export default {
name: 'TestComponent',
mixins: [mixinTest],
methods: {
testFunc() {
this.testData = true
this.methodTest()
}
}
}
</script>
let mixinTest = {
watch:{
testData : 'watchTest'
},
methods:{
methodTest() {
console.log("method call ", this.testData)
},
watchTest() {
console.log("watch call ", this.testData)
}
},
data () {
return {
testData : false,
}
},
}
export default mixinTest
Composition API
<template>
<div>
<button @click="testFunc">
mixin test
</button>
</div>
</template>
<script>
import { compositionTest } from "@/composables/compositionTest"
export default {
name: 'TestComponent',
setup() {
let { testData, methodTest } = compositionTest()
function testFunc() {
testData.value = true
methodTest()
}
return{
testFunc
}
},
}
</script>
// compositionTest.js
import { ref, watch } from 'vue'
export function compositionTest() {
// data
const testData = ref(false)
// methods
function methodTest() {
console.log("method call ", testData.value)
}
function watchTest() {
console.log("watch call ", testData.value)
}
// watch
watch([testData], watchTest)
return {
testData,
methodTest
}
}
정상동작 확인
갈길이 멀다
'Vue.js' 카테고리의 다른 글
vite-plugin-pwa를 통한 Service Worker 기반 캐싱(feat. 유저 프로필 이미지) (0) | 2025.06.20 |
---|---|
pinia store에서 vue-router 사용하기 (0) | 2025.01.13 |
MSW(Mock Service Worker) 적용 및 삽질로그(with Vue3/Vite) (0) | 2024.10.05 |