Vue.js의 'data:'와 'data()'의 차이점은 무엇입니까?
데이터 옵션을 두 가지 방법으로 사용했습니다.첫 번째 스니펫 데이터 객체는 키 값을 포함하지만 두 번째 데이터는 함수이다.개인에게 혜택이 있나요?Vue.js Docs에서 관련 설명을 찾을 수 없습니다.다음 2개의 코드 스니펫이 있습니다.
new Vue({
el: "#app",
data: {
message: 'hello mr. magoo'
}
});
new Vue({
el: "#app",
data() {
return {
message: 'hello mr. magoo'
}
}
});
둘 다 같은 결과를 내게 주고 있다.
당신의 구체적인 코드 예를 고려할 때 당신의 질문에 대한 코멘트가 요점을 놓친 것 같습니다.
루트 Vue 인스턴스(예:new Vue({ ... }), 를 간단하게 사용할 수 있습니다.data: { ... }문제없이.이 문제는 재사용 가능한 컴포넌트가 정의되어 있는 경우입니다.Vue.component(...)이 경우 다음 중 하나를 사용해야 합니다.data() {return { ... };}또는data: function() {return { ... };}.
그 이유는 재사용 가능한 자식 구성 요소의 개별 인스턴스에 대해 작동 중인 모든 데이터를 포함하는 고유한 개체가 존재하도록 하기 위함입니다.하위 구성 요소에서 대신data: { ... }이 데이터 오브젝트는 하위 컴포넌트 간에 공유되므로 몇 가지 심각한 버그가 발생할 수 있습니다.
이 문제에 대한 자세한 내용은 Vue.js 문서의 해당 섹션을 참조하십시오.
[Vue warn] :"data" 옵션은 구성 요소 정의에서 인스턴스별 값을 반환하는 함수여야 합니다.
따라서 새로운 vue 인스턴스 선량을 시작하는 것은 데이터 간에 중요하지 않습니다.{}이(가) 개체 또는 데이터(){return{}} 또는 데이터:function(){return{}}로 지정됩니다.
컴포넌트에 관한 한 중요한 예를 들어 보겠습니다.
<body>
<div id="app">
<counter></counter>
<counter></counter>
</div>
<script>
Vue.component('counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: {
counter:0
}
});
</script>
출력:
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
이제 vue 개체로 보겠습니다.
<body>
<div id="app">
<button v-on:click="counter += 1">{{ counter }}</button>
<button v-on:click="counter += 1">{{ counter }}</button>
</div>
<script>
new Vue({
el: '#app',
/*data() {
return {
counter:0
}
},*/
//or (output same)
/*data: function () {
return {
counter: 0
}
}*/
//or (output same)
data:{
counter:0
}
});
</script>
</body>
//이제 컴포넌트 내의 데이터로 동일한 컴포넌트를 반복해서 재사용해 보겠습니다.
<body>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script>
Vue.component('counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
}
})
new Vue({
el: '#app'
});
</script>
</body>
언급URL : https://stackoverflow.com/questions/48176345/what-is-difference-between-data-and-data-in-vue-js
'source' 카테고리의 다른 글
| 숫자에 대한 Larabel 규칙 유효성 검사 (0) | 2022.09.22 |
|---|---|
| MySql에서 DATETIME 필드의 날짜 부분에 인덱스를 만드는 방법 (0) | 2022.09.22 |
| 그라들 태스크 - Java 응용 프로그램에 인수를 전달합니다. (0) | 2022.09.22 |
| 문자열에서 숫자 추출 - StringUtils Java (0) | 2022.09.22 |
| PHP: 정의되지 않은 어레이 키를 처리하는 가장 빠른 방법 (0) | 2022.09.22 |