從基礎(chǔ)開(kāi)始

隨著人工智慧和一些技術(shù)影響者的出現(xiàn)，在 Javascript 領(lǐng)域使用框架之前似乎跳過(guò)了很多要點(diǎn)。理解核心 JavaScript 概念至關(guān)重要，就像先學(xué)會(huì)走路再跑步一樣。當(dāng)我得到這份新工作並且必須充分理解Vue 時(shí)，我花了時(shí)間回顧這些JavaScript，以便找到一種有效的Vue 3 開(kāi)發(fā)方法，我理解並且可以使用React ...但這不是我最喜歡的框架，這是另一個(gè)討論。這就是為什麼這些基礎(chǔ)知識(shí)很重要：

變數(shù)和資料類型

• 為什麼重要：Vue 3 的反應(yīng)系統(tǒng)嚴(yán)重依賴正確的變數(shù)聲明。
• 組合 API 需要了解引用和反應(yīng)物件的 const。
• 型別感知有助於 Vue3 的模板渲染和 prop 驗(yàn)證。

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

範(fàn)本文字

• 為什麼重要：這對(duì)於 Vue3 模板表達(dá)式和字串插值至關(guān)重要。
• 它廣泛用於計(jì)算屬性和方法。
• 範(fàn)本文字對(duì)於動(dòng)態(tài)元件範(fàn)本和 prop 值很有幫助。

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

箭頭功能

• 為什麼重要：對(duì)於 Vue 3 的 Composition API 至關(guān)重要。
• 用於 setup() 函數(shù)、計(jì)算屬性和觀察器。
• 對(duì)於在方法中保持正確的 this 綁定至關(guān)重要。

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

對(duì)象和對(duì)象解構(gòu)

• 為什麼重要：使用 Vue 反應(yīng)式物件的基礎(chǔ)。
• 組件道具和發(fā)出聲明所必需的。
• 對(duì)於 setup() 回傳的解構(gòu)至關(guān)重要。

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

數(shù)組和數(shù)組方法

• 為什麼重要：對(duì)於使用 v-for 渲染清單至關(guān)重要。
• 反應(yīng)式資料操作所必需的。
• 用於資料轉(zhuǎn)換的計(jì)算屬性。

<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>

Promise 和非同步/等待

• 為什麼重要：對(duì)於 setup() 中的資料擷取至關(guān)重要。
• 非同步組件操作所需。
• 生命週期掛鉤和觀察者必不可少的。

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

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

模組和導(dǎo)出

• 為什麼重要：組件組織的基礎(chǔ)。
• 可組合項(xiàng)和插件所必需的。
• 對(duì)於保持乾淨(jìng)的架構(gòu)至關(guān)重要。

// 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 }
  }
}

類別和物件導(dǎo)向的概念

• 為什麼重要：有助於理解組件繼承。
• 用於自訂指令實(shí)作。
• 對(duì)於複雜的狀態(tài)管理很有價(jià)值。

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
  }
}

可選連結(jié)

• 為什麼重要：對(duì)於模板中的安全屬性存取至關(guān)重要。
• 在計(jì)算屬性中很有用。
• 有助於處理非同步資料狀態(tài)。

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

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

事件處理

• 為什麼重要：對(duì)於組件通訊至關(guān)重要。
• DOM 事件管理所需。
• 對(duì)於自訂事件實(shí)作至關(guān)重要。

<template>
  <button @click="handleClick">Click me</button>
</template>

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

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

錯(cuò)誤處理

• 為什麼重要：對(duì)於組件錯(cuò)誤邊界很重要。
• 對(duì)於 API 呼叫和非同步操作至關(guān)重要。
• 對(duì)於保持應(yīng)用程式穩(wěn)定性至關(guān)重要。

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

這些程式碼片段示範(fàn)了每個(gè)概念在 Vue 3 開(kāi)發(fā)環(huán)境中的實(shí)際應(yīng)用，為開(kāi)發(fā)人員理解和應(yīng)用這些基本 JavaScript 技能提供了具體範(fàn)例。

JavaScript 核心概念的實(shí)際應(yīng)用

為了說(shuō)明如何在廣泛使用的初學(xué)者場(chǎng)景中使用這些基本的 JavaScript 概念，讓我們探索三個(gè)迷你專案：天氣應(yīng)用程式、背景顏色變更器和待辦事項(xiàng)應(yīng)用程式。這些範(fàn)例將示範(fàn)我們討論的概念的實(shí)際應(yīng)用。

天氣應(yīng)用程式

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

實(shí)施的核心概念：

• Async/Await：用於處理非同步 API 呼叫。
• 取得 API：從外部服務(wù)擷取天氣資料。
• DOM 操作：動(dòng)態(tài)更新 HTML 內(nèi)容。
• 範(fàn)本文字：用於輕鬆的字串插值和多行字串。
• 錯(cuò)誤處理：使用 try/catch 來(lái)管理取得作業(yè)期間的潛在錯(cuò)誤。

---

背景顏色變換器

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

實(shí)施的核心概念：

• 箭頭函數(shù)：用於簡(jiǎn)潔的函數(shù)表達(dá)式。
• 數(shù)學(xué)物件：產(chǎn)生顏色的隨機(jī) RGB 值。
• 範(fàn)本文字：用來(lái)建構(gòu) RGB 字串。
• 事件監(jiān)聽(tīng)器：處理使用者互動(dòng)（按鈕點(diǎn)擊）。
• DOM 操作：變更背景顏色並顯示目前顏色。

---

都都應(yīng)用程式

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

實(shí)施的核心概念：

• 本地儲(chǔ)存：用於跨會(huì)話持久保存待辦事項(xiàng)。
• 陣列方法：使用map進(jìn)行渲染，使用push/splice修改todo清單。
• 箭頭函數(shù)：函數(shù)中簡(jiǎn)潔的語(yǔ)法。
• 事件處理：管理表單提交和按鈕點(diǎn)擊。
• 模板文字：用於動(dòng)態(tài)產(chǎn)生 HTML 標(biāo)記。

---

這些迷你專案說(shuō)明了 JavaScript 核心概念如何在實(shí)際應(yīng)用中結(jié)合在一起。它們展示了非同步程式設(shè)計(jì)、DOM 操作、事件處理、陣列方法等，為在進(jìn)入 Vue3.js 開(kāi)發(fā)之前理解上述基本 JavaScript 技能提供了切實(shí)的背景。

<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>

以上是Vue 開(kāi)發(fā)人員的 JavaScript 基礎(chǔ)知識(shí)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！