[Vue] Vue에 대해 자주 묻는 질문들 (feat.stackoverflow)

 

저는 무언가 학습을 할때 늘 지식공유 커뮤니티에 키워드 검색을 하고 가장 자주 묻는 질문들 부터 항상 나열해서 정리하곤 하는데요. 
왜냐하면 사람들이 어려워하고 헷갈려하는 지점은 누구나 비슷하기 때문입니다. 회사에서 Vue를 쓰기 때문에 늘 막히고 헷갈리는 부분 역시 늘 비슷한 부분이었는데요

 

1. props가 변경하려고 할때 vue에서 경고알림 띄우는경우

props를 지역적으로 변경하려고 하는 것은 Vue의 안티패턴이므로 하지 않는게 좋습니다. 만약 그렇게 해야하는 경우라면 data에 필드 하나를 선언해서 props를 받아서 초기값을 세팅해주는편이 낫습니다. 아니라면 computed 속성을 사용하는 것도 방법입니다.

props: ['members'],

// 1) data에 초기값으로 세팅
data: () => ({
	mutated_members: JSON.parse(this.members);
})

// 2) computed 속성 사용
model: {
	prop: 'members',
	event: 'change_members'
}
computed: {
	members_local: {
    	get: function() {
        	return this.members;
        },
    	set: function(val) {
        	this.$emit('change_members', val);
        }
    }
}

 

 

2. Vue 'export default' 와 'new Vue' 의 차이?

new Vue를 통해 선언하게 되면 보통 앱의 나머지들에게 상속해주는 Root Vue Instance를 생성할 때 씁니다.
export default를 사용하면 언제든지 등록할 수 있고, 또 나중에 재사용할 수 있는 단일파일 컴포넌트를 만들어줄 때 사용하는데요.
그렇게 생성된 단일파일 컴포넌트는 다른 컴포넌트 안에서 재사용할 수도 있습니다.  

 

3. nested data를 watch로 감지하는 방법

member: {
    name: "Jean",
    age: 14
}

객체 안에 숨어있는 data가 변경되었을 때 watch는 변화를 감지 하지 못합니다. 그럼 watch가 객체안의 data가 변한 것을 감지하게 하려면 어떻게 해야할까요? 

//1) deep watcher 사용하기
watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

//2) computed 이용하기
var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

 

4. Method vs Computed

Method와 Computed와 차이점
computed는 computed value는 computed property가 더 정확한 표현입니다. Vue가 초기화되었을 때, computed property들은 Vue의 Vue 의 property로 변환됩니다. computed property는 값이 변경되지 않았을 때 반복해서 계산할 필요없이 캐시해둡니다. 
그러나 메서드는 Vue 인스턴스에 바인딩된 함수로, 호출될 때만 평가합니다. 그렇기 때문에 computed property로 표현할 수 있는 것을 함수를 사용할 필요는 없습니다.