Vue 'standar ekspor' vs 'Vue baru'

136

Saya baru saja menginstal Vue dan telah mengikuti beberapa tutorial untuk membuat proyek menggunakan templat webpack vue-cli. Ketika itu membuat komponen, saya perhatikan itu mengikat data kami di dalam hal-hal berikut:

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

Sedangkan dalam tutorial lain saya melihat data terikat dari:

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

Apa perbedaannya, dan mengapa sepertinya sintaksis di antara keduanya berbeda? Saya mengalami masalah dalam mendapatkan kode 'Vue baru' untuk bekerja dari dalam tag yang saya gunakan dari App.vue yang dihasilkan oleh vue-cli.

vue.js vue-component vue-cli rockzombie2
sumber
syukurlah untuk vscode!
petey

Jawaban:

161

Ketika Anda menyatakan:

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

Itu adalah contoh root Vue Anda yang berasal dari sisa aplikasi. Ini menggantung elemen root yang dinyatakan dalam dokumen html, misalnya:

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

Sintaks lainnya mendeklarasikan komponen yang dapat didaftarkan dan digunakan kembali nanti. Misalnya, jika Anda membuat komponen file tunggal seperti:

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

Anda nanti dapat mengimpor ini dan menggunakannya seperti:

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

Juga, pastikan untuk mendeklarasikan dataproperti Anda sebagai fungsi, jika tidak, properti tersebut tidak akan reaktif.


sumber
4
Oke, jadi setiap kali Anda bekerja dalam file komponen "MyApp.vue", Anda akan menggunakan sintaks "ekspor default {}", tetapi sebaliknya jika Anda hanya menggunakan Vue dalam file HTML biasa, Anda akan menggunakan "Vue baru ({})", benar?
rockzombie2
4
Secara umum, ya. Apakah Anda membuat instance root dalam dokumen HTML itu sendiri atau file eksternal - yaitu main.js- tidak terlalu penting, ketahuilah bahwa itu adalah titik awal aplikasi, mirip denganint main() C. Component.vuefile akan selalu menggunakan export default { ... }sintaksis. Dokumen melakukan pekerjaan dengan baik menjelaskan perbedaan antara komponen, global , lokal , dan file tunggal
Saya mengikuti Vue baru pertama ({el: '#app', data () {return {msg: 'A'}})} Kemudian Ketika saya mencoba menggunakan {{msg}} Properti atau metode "msg" tidak didefinisikan pada contoh tetapi direferensikan Mengapa? @ user320487
user123456
5

Kasus pertama ( export default {...}) adalah sintaks ES2015 untuk membuat beberapa definisi objek tersedia untuk digunakan.

Kasus kedua ( new Vue (...)) adalah sintaks standar untuk instantiasi objek yang telah didefinisikan.

Yang pertama akan digunakan dalam JS untuk bootstrap Vue, sementara keduanya dapat digunakan untuk membangun komponen dan template.

Lihat https://vuejs.org/v2/guide/components-registration.html untuk lebih jelasnya.

Shellum
sumber
3

Kapan pun Anda menggunakan

export someobject

dan beberapa objek

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

di atas Anda dapat mengimpor di mana saja menggunakan importataumodule.js dan di sana Anda dapat menggunakan beberapa objek. Ini bukan batasan bahwa beberapa objek akan menjadi objek hanya itu bisa menjadi fungsi juga, kelas atau objek.

Kapan kamu berkata 

new Object()

seperti yang kamu katakan 

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

Di sini Anda memulai objek kelas Vue.

Saya harap jawaban saya menjelaskan pertanyaan Anda secara umum dan lebih eksplisit.

DHRUV GUPTA
sumber
-7 
<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>
A.Batgem
sumber
20
Selamat Datang di Stack Overflow! Jawaban Anda mungkin bisa jauh lebih bermanfaat bagi pengguna lain jika Anda bisa menambahkan sedikit penjelasan pada kode.
anothernode