Vue 'ค่าเริ่มต้นการส่งออก' เทียบกับ 'Vue ใหม่'

137

ฉันเพิ่งติดตั้ง Vue และทำตามแบบฝึกหัดเพื่อสร้างโครงการโดยใช้เทมเพลต vue-cli webpack เมื่อสร้างส่วนประกอบฉันสังเกตเห็นว่ามันผูกข้อมูลของเราไว้ภายในสิ่งต่อไปนี้:

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

ในขณะที่บทช่วยสอนอื่น ๆ ฉันเห็นว่าข้อมูลถูกผูกไว้จาก:

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

อะไรคือความแตกต่างและทำไมดูเหมือนว่าไวยากรณ์ระหว่างทั้งสองแตกต่างกัน? ฉันมีปัญหาในการทำให้โค้ด 'new Vue' ทำงานจากภายในแท็กที่ฉันใช้จาก App.vue ที่สร้างโดย vue-cli

vue.js vue-component vue-cli

— rockzombie2
แหล่งที่มา

ขอบคุณพระเจ้าสำหรับ vscode!

— petey

162

เมื่อคุณประกาศ:

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คุณสมบัติของคุณเป็นฟังก์ชันมิฉะนั้นจะไม่เกิดปฏิกิริยา

4

เอาล่ะเมื่อใดก็ตามที่คุณทำงานในไฟล์คอมโพเนนต์ "MyApp.vue" คุณจะใช้ไวยากรณ์ "export default {}" แต่ไม่เช่นนั้นหากคุณใช้ Vue ในไฟล์ HTML ธรรมดาคุณจะ ใช้ "new Vue ({})" ถูกต้องหรือไม่

— rockzombie2

4

พูดโดยทั่วไปใช่ ไม่ว่าคุณจะสร้างอินสแตนซ์รูทในเอกสาร HTML เองหรือไฟล์ภายนอกเช่นmain.js- ไม่สำคัญเพียงแค่รู้ว่าเป็นจุดเริ่มต้นของแอปพลิเคชันคล้ายกับint main()ในComponent.vueไฟล์C. จะใช้export default { ... }ไวยากรณ์เสมอ เอกสารดำเนินงานที่ดีอธิบายความแตกต่างระหว่างส่วนประกอบที่ทั่วโลก , ท้องถิ่น , และไฟล์เดียว

ฉันกำลังติดตาม Vue ใหม่ตัวแรก ({el: '#app', data () {return {msg: 'A'}})} จากนั้นเมื่อฉันพยายามใช้ {{msg}} คุณสมบัติหรือวิธี "msg" ไม่ กำหนดไว้ในอินสแตนซ์ แต่อ้างถึง Why? @ user320487

— user123456

8

export default ใช้เพื่อสร้างการลงทะเบียนท้องถิ่นสำหรับองค์ประกอบ Vue

นี่คือบทความดีๆที่อธิบายเพิ่มเติมเกี่ยวกับส่วนประกอบ https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
แหล่งที่มา

5

กรณีแรก( export default {...}) คือไวยากรณ์ ES2015 สำหรับการกำหนดอ็อบเจ็กต์บางอย่างพร้อมใช้งาน

กรณีที่สอง ( new Vue (...)) เป็นไวยากรณ์มาตรฐานสำหรับการสร้างอินสแตนซ์อ็อบเจ็กต์ที่กำหนดไว้

ครั้งแรกจะใช้ใน JS เพื่อบูตสแตรป Vue ในขณะที่สามารถใช้เพื่อสร้างคอมโพเนนต์และเทมเพลต

ดู https://vuejs.org/v2/guide/components-registration.htmlสำหรับรายละเอียดเพิ่มเติม

— Shellum
แหล่งที่มา

3

เมื่อใดก็ตามที่คุณใช้

export someobject

และวัตถุคือ

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

ข้างต้นคุณสามารถนำเข้าได้ทุกที่โดยใช้importหรือmodule.jsและที่นั่นคุณสามารถใช้วัตถุได้ นี่ไม่ใช่ข้อ จำกัด ว่าวัตถุบางอย่างจะเป็นวัตถุเพียงอย่างเดียวก็สามารถเป็นฟังก์ชันได้เช่นกันคลาสหรือวัตถุ

เมื่อคุณพูดว่า

new Object()

อย่างที่คุณพูด

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

ที่นี่คุณกำลังเริ่มต้นอ็อบเจ็กต์ของคลาส Vue

ฉันหวังว่าคำตอบของฉันจะอธิบายคำถามของคุณโดยทั่วไปและชัดเจนยิ่งขึ้น

— DHRUV GUPTA
แหล่งที่มา