???? ?????

AI? ?? ?? ?? ??? ?? ???? ???? ?? Javascript ???? ?????? ???? ?? ?? ??? ???? ?? ??? ? ????. ?? JavaScript ??? ???? ?? ?????. ?? ??? ?? ?? ?? ??? ?? ????. ? ? ??? ??? Vue? ? ???? ?? ? Vue 3 ??? ?? ???? ?? ??? ?? ?? ??? JavaScript? ???? ? ??? ?????. ?? React? ???? ??? ? ??? ... ?? ?? ???? ?????? ????. , ??? ? ?? ?????. ??? ?? ??? ??? ??? ??? ????.

?? ? ??? ??

• ??? ??: Vue 3? ??? ???? ??? ?? ??? ?? ?????.
• ???? API? ????? ?? ? ??? ??? ?? const? ?? ??? ?????.
• ?? ??? Vue3? ??? ??? ? ?? ??? ??? ??? ???.

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

??? ???

• ??? ??: ?? Vue3 ??? ??? ? ??? ??? ??????.
• ?? ??? ???? ????? ?????.
• ??? ???? ?? ???? ???? prop ?? ??? ? ????.

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

??? ??

• ??? ??: Vue 3? Composition API? ?? ?????.
• setup() ??, ?? ?? ? ???? ?????.
• ????? ? ???? ???? ???? ? ??????.

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

??? ?? ??

• ??? ??: Vue? ?? ?? ??? ?????.
• ???? ?? ? ?? ??? ?????.
• setup() ???? ?? ??? ??????.

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

?? ? ?? ??

• ??? ??: v-for? ???? ??? ????? ? ?? ?????.
• ??? ??? ??? ??????.
• ??? ??? ?? ??? ??? ?????.

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

??? ???/??

• ??? ??: setup()?? ???? ???? ? ?????.
• ??? ???? ??? ?????.
• ???? ?? ? ????? ??????.

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

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

?? ? ????

• ??? ??: ?? ?? ??? ?????.
• ???? ? ????? ?????.
• ??? ??? ???? ? ??????.

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

???? ???? ??

• ??? ??: ?? ?? ??? ???? ? ??? ???.
• ??? ?? ??? ??? ?????.
• ??? ?? ??? ?????.

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

??? ??

• ??? ??: ???? ??? ?? ???? ??????.
• ??? ??? ?????.
• ??? ??? ??? ???? ? ?????.

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

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

??? ??

• ??? ??:???? ??? ?????.
• DOM ??? ??? ?????.
• ?? ??? ??? ??????.

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

?? ??

• ??? ??:???? ?? ??? ?????.
• API ?? ? ??? ??? ?????.
• ? ??? ??? ?? ?????.

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

? ?? ??? Vue 3 ?? ?? ??? ? ??? ?? ??? ????, ???? ??? ???? JavaScript ??? ???? ??? ? ?? ???? ?? ?????.

?? JavaScript ??? ?? ??

??? ?? JavaScript ??? ?? ???? ??? ?????? ??? ????? ???? ?? ? ?? ?? ????? ?? ?, ??? ?? ????, ? ? ?? ???????. ??? ?? ??? ??? ??? ?? ??? ?????.

?? ?

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

??? ?? ??:

• Async/Await: ??? API ??? ???? ? ?????.
• Fetch API: ?? ????? ?? ???? ?????.
• DOM ??: HTML ???? ???? ???????.
• ??? ???: ?? ??? ?? ? ?? ? ????.
• ?? ??: try/catch? ???? ???? ?? ? ???? ??? ?????.

---

??? ???

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

??? ?? ??:

• ??? ??: ??? ?? ???.
• ?? ??: ??? ?? ??? RGB ?? ?????.
• ??? ???: RGB ???? ?????.
• ??? ???: ??? ?? ??(?? ??)? ?????.
• DOM ??: ???? ???? ?? ??? ?????.

---

?? ?

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

??? ?? ??:

• ?? ???: ?? ??? ?? ? ?? ???? ? ?????.
• ?? ??: ????? ?? ???? ?? ?? ???? ??/?????? ?????.
• ??? ??: ??? ??? ??? ??
• ??? ??: ?? ?? ? ?? ??? ?????.
• ??? ???: HTML ???? ???? ?????.

---

??? ?? ????? ?? JavaScript ??? ?? ???????? ??? ????? ?????. ??? ?????, DOM ??, ??? ??, ?? ?? ?? ???? Vue3.js ??? ???? ?? ?? ?? ?? JavaScript ??? ??? ? ?? ???? ????? ?????.

<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 ???? ?? JavaScript ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!