Vue 'xuất mặc định' so với 'Vue mới'

136

Tôi vừa cài đặt Vue và đã theo dõi một số hướng dẫn để tạo dự án bằng cách sử dụng mẫu webpack vue-cli. Khi nó tạo ra thành phần, tôi nhận thấy nó liên kết dữ liệu của chúng tôi bên trong như sau:

export default {
    name: 'app',
    data: []
}

Trong khi đó trong các hướng dẫn khác tôi thấy dữ liệu bị ràng buộc từ:

new Vue({
    el: '#app',
    data: []
)}

Sự khác biệt là gì và tại sao có vẻ như cú pháp giữa hai là khác nhau? Tôi gặp sự cố khi để mã 'Vue mới' hoạt động từ bên trong thẻ tôi đang sử dụng từ App.vue được tạo bởi vue-cli.

vue.js vue-component vue-cli

— rockzombie2
nguồn

cảm ơn lòng tốt cho vscode!

— petey

160

Khi bạn tuyên bố:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

Đó thường là ví dụ Vue gốc của bạn mà phần còn lại của ứng dụng xuất phát từ đó. Điều này treo phần tử gốc được khai báo trong một tài liệu html, ví dụ:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

Cú pháp khác là khai báo một thành phần có thể được đăng ký và sử dụng lại sau này. Ví dụ: nếu bạn tạo một thành phần tệp duy nhất như:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

Sau này bạn có thể nhập cái này và sử dụng nó như sau:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

Ngoài ra, hãy chắc chắn khai báo các datathuộc tính của bạn dưới dạng hàm, nếu không chúng sẽ không có tác dụng.

4

Được rồi, vì vậy, bất cứ khi nào bạn làm việc trong tệp thành phần "MyApp.vue", bạn sẽ sử dụng cú pháp "xuất mặc định {}", nhưng nếu không, nếu bạn chỉ sử dụng Vue trong tệp HTML đơn giản, bạn sẽ đang sử dụng "Vue mới ({})", đúng không?

— rockzombie2

4

Nói chung là có. Cho dù bạn tạo cá thể gốc trong chính tài liệu HTML hoặc tệp bên ngoài - tức là main.js- không thực sự quan trọng, chỉ cần biết rằng đó là điểm khởi đầu của ứng dụng, gần giống với tệp int main()C. Component.vuesẽ luôn sử dụng export default { ... }cú pháp. Các tài liệu làm rất tốt việc giải thích sự khác biệt giữa các thành phần, tệp toàn cầu , cục bộ và tệp đơn

Tôi đang theo dõi Vue mới đầu tiên ({el: '#app', data () {return {dir: 'A'}})} Sau đó, khi tôi cố gắng sử dụng {{dir}} Thuộc tính hoặc phương thức "dir" không được định nghĩa trên ví dụ nhưng được tham chiếu Tại sao? @ user320487

— user123456

8

export default được sử dụng để tạo đăng ký cục bộ cho thành phần Vue.

Đây là một bài viết tuyệt vời giải thích thêm về các thành phần https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
nguồn

5

Trường hợp đầu tiên ( export default {...}) là cú pháp ES2015 để làm cho một số định nghĩa đối tượng có sẵn để sử dụng.

Trường hợp thứ hai ( new Vue (...)) là cú pháp tiêu chuẩn để khởi tạo một đối tượng đã được xác định.

Cái đầu tiên sẽ được sử dụng trong JS để bootstrap Vue, trong khi hoặc có thể được sử dụng để xây dựng các thành phần và mẫu.

Xem https://vuejs.org/v2/guide/components-registration.html để biết thêm chi tiết.

— Vỏ ốc
nguồn

3

Bất cứ khi nào bạn sử dụng

export someobject

và một số dự án là

{
 "prop1":"Property1",
 "prop2":"Property2",
}

ở trên bạn có thể nhập bất cứ nơi nào bằng cách sử dụng importhoặcmodule.js ở đó bạn có thể sử dụng một số dự án. Đây không phải là một hạn chế rằng someobject sẽ là một đối tượng, nó chỉ có thể là một hàm, một lớp hoặc một đối tượng.

Khi bạn nói

new Object()

như bạn đã nói

new Vue({
  el: '#app',
  data: []
)}

Ở đây bạn đang bắt đầu một đối tượng của lớp Vue.

Tôi hy vọng câu trả lời của tôi giải thích câu hỏi của bạn nói chung và rõ ràng hơn.

— GURA DHRUV
nguồn

-7

<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>

— A.Batgem
nguồn

20

Chào mừng bạn đến với Stack Overflow! Câu trả lời của bạn có thể hữu ích hơn nhiều cho những người dùng khác nếu bạn có thể thêm một chút giải thích cho mã.

— Anothernode