기록 블로그

Computed

<div id="hello">
<p> 역순 : "{{reverseHello}}"</p?

var vm = new Vue({
    el : '#hello'
    data: {
        hello: 'HEOLL'    
    },
    coumputed: {
        reverseHello() {
            return this.hello.split('').reverse().join('')  // LLOEH
        }
    }
})

hello 가 변경되지 않는 한 reverseHello를 여러번 요청해도 계산이 다시 되지 않고 계산 되어 있던 결과를 즉시 반환한다

cf) function

computed는 해당 속성이 변경될때만 함수가 실행된다.

언제 computed 사용?

• 캐싱을 원하는 경우 사용
• computed의 set, get속성

computed: {
    fullName: {
        get:function() {
            return this.firstName+''+this.secondName
        },
        set:function() {
            let name=newValue.splite('')
            this.firstName = names[0]
            this.lastName = name[names.length-1]
        }
    }
}

watch

• 옵션

  deep: true - Objects 내부의 중첩된 값 변경 감지

  immediate: true - 표현식의 현재 값으로 즉시 콜백 호출

  • 첫번째 콜백할때 호출함

  • 만약, 콜백대신에 unwatch 함수를 먼저 호출하고 싶으면

    watch: {
      value: {
          handle(newVal) {
              this.doSomething()
          }
          immediate: true
      }
    }

     

beforeCreate

• 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계
• data, methods 속성은 아직 정의 되지 않고 돔과 같은 화면 요소에도 접근 불가

created

• beforeCreate 라이프 사이클 단계 다음에 실행되는 단계
• data 속성과 methods 속성이 정의되어있어 this. data 또는 this. fetchData()와 같은 로직을 이용해 data 속성과 methods 속성에 정의된 값에 접근해 로직을 실행할 수 있음
• 아직 인스턴스가 화면요소에 부착되지 전이므로 template 속성에 정의된 돔 요소로 접근 불가
• data 속성과 methods 속성에 접근하기 가장 좋아 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음

beforeMount

• created 단계 이후 template 속성에 지정한 마크업 속성을 render()함수로 변환 후 el 속성에 지정한 돔에 인스턴스를 부착하기 전에 호출하는 단계

  cf) render() -자바스크립트로 화면의 돔을 그리는 함수

mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 돔에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계

• 다만 ! 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수도 있음

  cf ) 반환되는 시점이 다른경우 $nextTick() API 를 활용해 HTML 코드로 최종 파싱 될 때까지 기다린 후 돔 제어 로직을 추가

beforeUpdate

• el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨
• 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시
• 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
• 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음

updated

• 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
• 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점으로, 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋음
• 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질수 있어 값 변경시 computed, watch 와 같은 속성을 사용해야함
• 데이터 값을 갱신하는 로직 ⇒ beforeUpdate
• 변경 데이터의 화면 요소와 관련된 로직 ⇒ updated

beforeDestory

• 뷰 인스턴스가 파괴되기 직전에 호출되는 단계
• 아직 인스턴스에 접근이 가능해 뷰 인스턴스의 데이터를 삭제하기 좋음

destoryed

• 뷰 인스턴스가 파괴되고 나서 호출하는 단계

watch, create에는 화살표 함수를 사용하는 것을 지양
왜? 화살표 함수들은 부모 컨텍스트에 바인딩 되기에 this컨텍스트가 호출하는 vue인스턴스에 사용할 경우 'Uncatch TypeError: ' 가 날 수도 있음

부모 자식 간의 컴포넌트 마운트 순서

이벤트 버스 사용 시 $on 을 못하는 이유

수동 mounting 추천 하지 않음

• 뷰 컴포넌트 대신에 수동으로 자식 컴포넌트를 마운트 하는 경우 발생
• dialog 훅을 beforeDestory 대신 destoryed 훅에 놓아 수동으로 꺼줘야함

인스턴스가 화면에 적용되는 과정

• 뷰 라이브러리 파일 로딩
• 인스턴스 객체 생성 (옵션 속성 포함)
• 특정 화면 요소에 인스턴스를 붙임
• 인스턴스 내용이 화면 요소로 변환
• 변화된 화면 요소를 사용자가 최종 확인

new Vue({
    el:'#app',
    data:{
        message: 'Hello Vue.js!'
    }
});

<div id ="app">
    {{message}}
</div>

• el 속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 객체의 data이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환
• data 속성의 message 값 Hello Vue.j 가 {{message}} 와 치환

속성

computed

• 산출 속성으로 data 와 비슷하게 사용되는 함수로 인해 산출 되는 데이터

template

• 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음

methods

• 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있음

created

• 뷰 인스턴스가 생성되자마자 실행할 로직을 정의하는 속성
• DOM이 아직 구축되지 않은 상태로 인스턴스 자신을 나타내는 this에 접근할 수 있지만 $el 과 getElementById() 등을 이용해 DOM을 통해서는 접근 불가

속성에 데이터 바인딩 하기

• 속성에 전개 불가능

<input type="text" value="{{message}}">  
<!--ERROR--!>

• 속성에 데이터 바인딩 하는법

<input type="text" v-bind:value="message">
<!--생략 하는 방법 --!>
<input type="text" :value="message">

화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인

왜 node js 필요한가

• 빌드 자동화
• 개발 환경 커스터 마이징
• package.json 항목 의미
  • name
  • version
  • description
  • main:노트 애플리케이션 일 경우 진입점 경로,

Webpack

• 여러 파일을 하나로 합쳐주는 번들러

• 번들러

  지정 단위로 하나의 파일로 만들어 요청에 대한 응답을 전달할 수 있는 환경

  옛날과 달리 컴퓨터 성능이 많이 좋아져 모듈 단위로 잘게 나눠서 개발해 유지보수나 가독성이 좋게 함

• 시작점으로부터 의존 모듈을 모두 찾아 결과물을 만듦

• 기능

  • 리소스 묶기
  • 바벨을 이용해 es5 코드로 바꿈
  • 변화를 감지해 다시 실행

loader

• 웹팩은 모든 파일을 모듈로 봄 (자바 스크립트로 만든 모듈, 스타일 시트, 이미지, 폰트 등 전무 모듈로 보기에 import 구문을 이용하면 자바 스크립트 코드 안으로 가져올 수 있음)
  • 어떻게 ? 로더 덕분에

Vue 는 MVVM 패턴

• Backend 로직과 Client의 마크업, 데이터 표현단을 분리하기 위한 구조
• 화면 앞단 로직과 뒷단 DB 데이터 처리 및 서버 로직 분리

• 파일명 - 파스칼 케이스 이용

import MyComponent from '@/MyComponent.vue'
export default{
    name: 'MyComponet'
}

// 컴포넌트 사용시 <my-component>

• 컴포넌트 이름 규칙 - 케밥 케이스 이용

<my-component></my-component>

• prop 이름 규칙 - 카멜 테이스

  • 추천

    props: {
      greetingText: String
    }

    <WelcomeMessage greeting-text="hi/>

  • 비추천

    props: {
      'greeting-text': String
    }

    <WelcomeMessage greetingText="hi/>

• 속성값

<!-- good -->
<SideBar : style="{width:sidebar+'px'}"></SideBar>
<!-- bad -->
<SideBar : style={width:sidebar+'px'}></SideBar>

• style : 범위가 지정됨 스타일과 지정되지 않은 스타일은 동일한 컴포넌트에 포함 할 수 있습니다.

<style>
/*전역 스타일*/
</style>

<style scoped>
/*로컬 스타일*/
</style>

v-if / v-show

v-if

• 조건에 따라 컴포넌트가 실제 제거 / 생성

v-show

• 단순 css의 display 속성만 변경

플러그인 사용

Vue.use(Myplugin)

new Vue({
    //options
})

배열 변경 감지

변이 메소드(래핑된 메소드)

→ 호출된 원본 배열을 변형

• push()
• pop()
• shift()
• unshift()
• sort()
• splice()
• reverse()

배열 대체

→ 호출된 원본 배열을 변형하지 않고 항상 새 배열 반환

• filter()
• concat()
• slice()

인덱스로 배열에 있는 항목을 직접 설정하는 경우 / 배열 길이를 수정하는 경우 → 불가

var vue = new Vue({
    data: {
        items: ['a','b']
    }
})
vue.items[0] ='c' // 불가능
vue.items.length = 1 // 불가능

// sol
Vue.set(vue.items, indexOfItem, newValue)
vue.items.splice(indexOfItem, 1, newValue)

이벤트 수식어

• .stop - 클릭 이벤트 전파 중단
• . prevent - 제출 이벤트가 페이지를 다시 로드하지 않음
• .capture - 수식어 체이닝 가능
• .prevent - 단순히 수식어만 사용할 수 있음
• .capture - 이벤트 리스너 추가시 캡처 모드 사용 (내부 element 대상으로 하는 이벤트가 해당 element에서 처리되기전에 먼저 처리)
• .self - event.target이 element 자체인 경우 트리거에서 처리

@click.prevent.self - 모든 클릭 막을 수 있음
@click.self.prevent - 엘리먼트 자체에 대한 클릭만 방지

주의

• 변수값 맞추기
• watch에서 object 변경 감지 . ~~이런식으로 해서 하나씩 못함

var person: {
    familly: {
        count: this.count
        live: this.live
    },
    me: {
        age: this.age
        colleage: this.highschool    
    }
}

-> 해당 객체 watch에서 변경감지해서 사용할 경우
watch:{
    person(newVal, oldVal){
        this.person.familly = newVal.family // 불가능
        this.person.me = newVal.me  // 불가능
        this.person = newVal // 가능
        this.person = Object.assgin({}, newVal) // 가능
    }
}