Asas JavaScript untuk Pembangun Vue

Mulakan pada Asas

Dengan kemunculan AI dan beberapa pengaruh berteknologi, nampaknya terdapat banyak perkara yang dilangkau sebelum menggunakan rangka kerja dalam tanah Javascript. Memahami konsep teras JavaScript adalah penting, seperti belajar berjalan sebelum berlari. Apabila saya mendapat pekerjaan baharu ini dan perlu memahami Vue dengan baik, saya mengambil masa untuk menyemak JavaScript ini untuk mempunyai pendekatan yang berkesan untuk pembangunan Vue 3, saya faham dan boleh menggunakan React ... tetapi ia bukan rangka kerja kegemaran saya , ini perbincangan lain. Inilah sebab asas ini penting :

Pembolehubah dan Jenis Data

• Mengapa ia penting: Sistem kereaktifan Vue 3 sangat bergantung pada pengisytiharan pembolehubah yang betul.
• API gubahan memerlukan pemahaman tentang const untuk ref dan objek reaktif.
• Kesedaran jenis membantu dengan pemaparan templat Vue3 dan pengesahan prop.

const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})

Templat Literal

• Mengapa ia penting: Ini penting untuk ungkapan templat Vue3 dan interpolasi rentetan.
• Ia digunakan secara meluas dalam sifat dan kaedah yang dikira.
• Tersurat templat boleh membantu untuk templat komponen dinamik dan nilai prop.

const greeting = computed(() => `Hello, ${user.name}!`)

Fungsi Anak Panah

• Mengapa ia penting: Kritikal untuk API Komposisi Vue 3.
• Digunakan dalam fungsi persediaan(), sifat dikira dan pemerhati.
• Penting untuk mengekalkan kaedah pengikatan ini dengan betul.

const doubleCount = computed(() => count.value * 2)
watch(() => user.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`)
})

Objek dan Pemusnahan Objek

• Mengapa ia penting: Asas untuk bekerja dengan objek reaktif Vue.
• Diperlukan untuk prop komponen dan mengeluarkan pengisytiharan.
• Penting untuk memusnahkan daripada setup() kembali.

export default {
  setup(props, { emit }) {
    const { title, description } = props
    return { title, description }
  }
}

Tatasusunan dan Kaedah Tatasusunan

• Mengapa ia penting: Kritikal untuk memaparkan senarai dengan v-for.
• Penting untuk manipulasi data reaktif.
• Digunakan dalam sifat yang dikira untuk transformasi data.

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = ref([/* ... */])
const filteredItems = computed(() => 
  items.value.filter(item => item.isActive)
)
</script>

Janji dan Async/Await

• Mengapa ia penting: Penting untuk pengambilan data dalam persediaan().
• Diperlukan untuk operasi komponen tak segerak.
• Penting untuk cangkuk dan pemerhati kitaran hayat.

import { onMounted } from 'vue'
export default {
  async setup() {
    const data = ref(null)

    onMounted(async () => {
      data.value = await fetchData()
    })
    return { data }
  }
}

Modul dan Eksport

• Mengapa ia penting: Asas untuk organisasi komponen.
• Diperlukan untuk kompos dan pemalam.
• Penting untuk mengekalkan seni bina yang bersih.

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

// Component.vue
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Kelas dan Konsep Berorientasikan Objek

• Mengapa ia penting: Membantu untuk memahami warisan komponen.
• Digunakan dalam pelaksanaan arahan tersuai.
• Berharga untuk pengurusan negeri yang kompleks.

class BaseComponent {
  constructor(name) {
    this.name = name
  }

  sayHello() {
    console.log(`Hello from ${this.name}`)
  }
}

class SpecialComponent extends BaseComponent {
  constructor(name, special) {
    super(name)
    this.special = special
  }
}

Rantaian Pilihan

• Mengapa ia penting: Penting untuk akses harta yang selamat dalam templat.
• Berguna dalam sifat yang dikira.
• Membantu untuk mengendalikan keadaan data tak segerak.

<template>
  <div>{{ user?.profile?.name }}</div>
</template>

<script setup>
const user = ref(null)
const userName = computed(() => user.value?.profile?.name ?? 'Guest')
</script>

Pengendalian Acara

• Mengapa ia penting:Penting untuk komunikasi komponen.
• Diperlukan untuk pengurusan acara DOM.
• Penting untuk pelaksanaan acara tersuai.

<template>
  <button>Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['custom-event'])

function handleClick() {
  emit('custom-event', { data: 'Some data' })
}
</script>

Pengendalian Ralat

• Mengapa ia penting:Penting untuk sempadan ralat komponen.
• Kritis untuk panggilan API dan operasi tak segerak.
• Penting untuk mengekalkan kestabilan apl.

const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})

Coretan kod ini menunjukkan aplikasi praktikal setiap konsep dalam konteks pembangunan Vue 3, memberikan contoh konkrit untuk pembangun memahami dan menggunakan kemahiran JavaScript asas ini.

Aplikasi Praktikal Konsep Teras JavaScript

Untuk menggambarkan cara konsep JavaScript penting ini digunakan dalam senario pemula yang digunakan secara meluas, mari kita terokai tiga projek mini: apl cuaca, penukar warna latar belakang dan apl todo. Contoh-contoh ini akan menunjukkan aplikasi praktikal konsep yang telah kita bincangkan.

Apl Cuaca

const greeting = computed(() => `Hello, ${user.name}!`)

Konsep Teras yang Dilaksanakan:

• Async/Await: Untuk mengendalikan panggilan API tak segerak.
• Ambil API: Untuk mendapatkan semula data cuaca daripada perkhidmatan luaran.
• Manipulasi DOM: Untuk mengemas kini kandungan HTML secara dinamik.
• Templat Huruf: Untuk interpolasi rentetan mudah dan rentetan berbilang baris.
• Pengendalian Ralat: Menggunakan cuba/tangkap untuk mengurus kemungkinan ralat semasa operasi pengambilan.

---

Penukar Warna Latar Belakang

const doubleCount = computed(() => count.value * 2)
watch(() => user.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`)
})

Konsep Teras yang Dilaksanakan:

• Fungsi Anak Panah: Untuk ungkapan fungsi ringkas.
• Objek Matematik: Untuk menjana nilai RGB rawak untuk warna.
• Templat Literal: Untuk membina rentetan RGB.
• Pendengar Acara: Untuk mengendalikan interaksi pengguna (klik butang).
• Manipulasi DOM: Untuk menukar warna latar belakang dan memaparkan warna semasa.

---

Apl Todo

export default {
  setup(props, { emit }) {
    const { title, description } = props
    return { title, description }
  }
}

Konsep Teras yang Dilaksanakan:

• Storan Tempatan: Untuk tugasan berterusan merentas sesi.
• Kaedah Tatasusunan: Menggunakan peta untuk pemaparan dan tolak/splice untuk mengubah suai senarai tugasan.
• Fungsi Anak Panah: Untuk sintaks ringkas dalam fungsi.
• Pengendalian Acara: Untuk mengurus penyerahan borang dan klik butang.
• Templat Literal: Untuk menjana penanda HTML secara dinamik.

---

Projek mini ini menggambarkan cara konsep teras JavaScript disatukan dalam aplikasi praktikal. Mereka mempamerkan pengaturcaraan tak segerak, manipulasi DOM, pengendalian acara, kaedah tatasusunan dan banyak lagi, menyediakan konteks yang ketara untuk memahami kemahiran asas JavaScript yang penting di atas sebelum memasuki pembangunan Vue3.js.

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = ref([/* ... */])
const filteredItems = computed(() => 
  items.value.filter(item => item.isActive)
)
</script>

Atas ialah kandungan terperinci Asas JavaScript untuk Pembangun Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!