watch사용시에 유의해야할 점.1. 값참조 const obj = reactive({ count: 0 })// 이것은 작동하지 않습니다. watch()에 숫자를 전달하고 있기 때문입니다.watch(obj.count, (count) => { console.log(`Count는: ${count}입니다`)})// getter를 사용해야한다.watch( () => obj.count, (count) => { console.log(`Count는: ${count}입니다`) }) 2. 깊은감시 state.someObject.nestedProperty = 'another value'; 로 바꿀시에는, 깊은감시로 참조를 할 수 있고, 얕은 감시에는 state.someObject = { nestedProper..
템플릿에 너무 많은 논리를 넣으면안된다. export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }}책을 가지고 있다:{{ author.books.length > 0 ? 'Yes' : 'No' }} 위와 같은것은 좋은 예제가 아니다. 계산된 속성을 사용해야한다. export default { data() { return { author: { name:..
1. 반응형 상태 설정 script안의data(){} 보관함을 통하여 상태를 선언및 저장한다. (state처럼 this를 통하여 변경가능) export default { data() { return { count: 1 } }, // `mounted`는 나중에 설명할 생명 주기 훅입니다. mounted() { // `this`는 컴포넌트 인스턴스를 나타냅니다. console.log(this.count) // => 1 // 값을 변경할 수 있습니다. this.count = 2 }} 메서드를 통해서 함수를 사용할 수 있다.export default { data() { return { count: 0 } }, methods: { ..
싱글파일컴포넌트 (SFC) - 파일형식이다. => 컴포넌트 정의하고 만든다.Single-File-Component = JAVASCRIPT, HTML, CSS 를 하나의 파일로 묶는다. API스타일- 옵션 API - 회사 예전 코드 옵션으로 되어있음data, method 등을 사용하여 표현(리액트 상의 class로 사용이 가능하고, OOP적 사용으로 this 등이 들어감) - 컴포지션API - 고도화 및 마이그레이션 시 필요한 코드function 등을 사용하여 표현(리액트 상의 함수형 컴포넌트로 생각 할 수 있다.) 1. 여러 속성바인딩 객체안에 id, class 등을 넣고서, v-bind를 사용하여 넣어주면 끝!data() { return { objectOfAttrs: { id: '..