Vue '내보내기 기본값' vs 'new Vue'
나는 방금 Vue를 설치했고 vue-cli 웹 팩 템플릿을 사용하여 프로젝트를 만들기 위해 몇 가지 튜토리얼을 따라왔다.컴포넌트를 만들 때, 나는 이 컴포넌트가 우리의 데이터를 다음과 같은 내부로 묶는 것을 알아차렸다.
export default {
name: 'app',
data: []
}
다른 튜토리얼에서는 데이터가 다음으로부터 바인딩되는 것을 본다.
new Vue({
el: '#app',
data: []
)}
무엇이 다르고, 왜 둘 사이의 구문이 다른 것처럼 보이는가?vue-cli에 의해 생성된 App.vue에서 사용 중인 태그 내부에서 'new Vue' 코드가 작동하는 데 문제가 있음.
선언할 때:
new Vue({
el: '#app',
data () {
return {}
}
)}
그것은 일반적으로 애플리케이션의 나머지 부분이 내려가는 루트 Vue 인스턴스다.이는 HTML 문서에 선언된 루트 요소에서 중단된다. 예를 들어,
<html>
...
<body>
<div id="app"></div>
</body>
</html>
다른 구문은 나중에 등록하고 재사용할 수 있는 구성요소를 선언하는 것이다.예를 들어 다음과 같은 단일 파일 구성 요소를 생성하는 경우:
// my-component.js
export default {
name: 'my-component',
data () {
return {}
}
}
나중에 이것을 가져와서 다음과 같이 사용할 수 있다.
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from 'my-component'
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
또한 반드시 신고하십시오.data기능으로서의 특성, 그렇지 않으면 반응하지 않을 것이다.
export defaultVue 구성 요소의 로컬 등록을 생성하는 데 사용된다.
여기 구성 요소에 대해 더 자세히 설명하는 훌륭한 기사가 있다. https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
첫 번째 사례()export default {...}는 일부 객체 정의를 사용할 수 있도록 하기 위한 ES2015 구문이다.
두 번째 사례 (new Vue (...))는 정의된 객체를 인스턴스화하기 위한 표준 구문이다.
첫 번째는 JS에서 Vue를 부트스트랩하는 데 사용되며, 두 가지 중 하나는 구성 요소와 템플릿을 구축하는 데 사용될 수 있다.
자세한 내용은 https://vuejs.org/v2/guide/components-registration.html을 참조하십시오.
사용할 때마다
export someobject
그리고 어떤 대상은
{
"prop1":"Property1",
"prop2":"Property2",
}
위와 같이 어디서든지 가져올 수 있는 것import또는module.js그리고 거기서 당신은 어떤 물체를 사용할 수 있다.이것은 어떤 물체가 하나의 물체가 될 것이라는 제한이 아니다. 단지 그것 역시 하나의 함수가 될 수 있다. 클래스나 물체.
라고 말할 때
new Object()
네가 말했다시피.
new Vue({
el: '#app',
data: []
)}
여기 당신은 Vue 등급의 대상을 시작하고 있다.
나는 내 대답이 너의 질의에 대해 전반적으로 더 명확하게 설명하기를 바란다.
참조URL: https://stackoverflow.com/questions/48727863/vue-export-default-vs-new-vue
'IT이야기' 카테고리의 다른 글
| vue 앱의 main.js 파일에서 스토어 getter 업데이트 값에 액세스하는 방법 (0) | 2022.03.19 |
|---|---|
| React Typecript 전체 프로젝트에서 사용되지 않은 가져오기/포고를 제거하려면 어떻게 해야 하는가? (0) | 2022.03.19 |
| 관측 가능으로 각도 2 변경 감지 (0) | 2022.03.19 |
| 어레이 생성 시 반응 감소x 리렌더 (0) | 2022.03.19 |
| fetch response.json()에서 responseData = 정의되지 않음 (0) | 2022.03.19 |