## VUEJS KNOWLEDGE
### 1. Vue là gì ?

Vue (pronounced /vjuː/, like view) là thư viện JS giúp xây dựng giao diện người dùng. Nó được xây dựng dựa trên HTML, CSS và JS tiêu chuẩn đồng thời cung cấp mô hình lập trình dựa trên thành phần (**COMPONENT-BASED**) giúp xây dựng giao diện hiệu quả từ đơn giản đến phức tạp.

==Note: Nhóm mình đang sử dụng Vue 3. Cụ thể hơn là phiên bản 3.2.13==

### 2. Single-File Component là gì ?
**Single-File Components** (a.k.a. ***.vue** files, **SFC**): là định dạng file đặc biệt của vue (khá giống HTML) giúp đóng gói logic (JavaScript), template (HTML) và style (CSS) của thành phần trong một tệp duy nhất. Ví dụ định dạng SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

### 3. Các kiểu API mà Vue hỗ trợ
Vue cung cấp 2 kiểu API là: **Options API** và **Composition API.**
- **Option API**: Với kiểu này, ta định nghĩa logic component bằng cách sử dụng 1 object gồm các options, ví dụ như data, methods và mounted. Các thuộc tính nằm trong option được gói vào trong từ khóa **this** nằm bên trong các hàm.
==Cách này có ưu điểm là tổ chức code theo kiểu OOP dễ cho sinh viên mới học.==

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

- **Composition API**: Với kiểu này, ta định nghĩa logic component bằng cách sử dụng các hàm API được import, thường dùng thẻ ```<script setup>```để định nghĩa ra các biến và hàm được sử dụng trong trực tiếp trong template.
==Style này là 1 built-in feature trong Vue 3 và Vue 2.7 tuy nhiên với các phiên bản Vue 2 cũ hơn thì phải dùng thêm plugin **@vue/composition-api**== Nó gồm các APIs:
- Reactivity API, e.g. ref() and reactive(), giúp tạo ra reactive state, computed state, and watchers.
- Lifecycle Hooks, e.g. onMounted() and onUnmounted(), tạo dựng các hook ứng với vòng đời của component.
- Dependency Injection, i.e. provide() and inject().
**More info**: https://vuejs.org/guide/extras/composition-api-faq.html

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

==Note: Ta có thể sử dụng cả 2 style bằng việc sử dụng option setup() trong Options API. Đây là cách mà nhóm mình đang làm.==

### 4. Lifecycle Hooks trong Vue
- **Lifecycle** là vòng đời mỗi instance của component Vue.

- Vue cung cấp sẵn các hàm (các hooks) trong API để có thể gọi trong từng giai đoạn của vòng đời:
- **beforeCreate**: Được gọi ngay lập tức khi phiên bản được khởi tạo, sau khi phân giải props, trước khi xử lý các option khác như data() hoặc computed.
- **created**: Khi hook này đc gọi, những thứ sau được set up: reactive data, computed properties, methods, and watchers.
- **beforeMount**: Khi hook này được gọi, component đã thiết lập xong reactive data của nó, nhưng chưa có tạo DOM.
- **mounted**: Một component được gọi là 'mounted' khi các component con của nó đã được gắn kết, cây DOM của nó cx được tạo và chèn vào component cha của nó. Hook này chủ yếu sẽ là xử lí DOM được hiển thị.
- **beforeUpdate**: Hook này có thể được sử dụng để truy cập trạng thái DOM trước khi Vue cập nhật DOM.
- **updated**: Được gọi sau khi component đã cập nhật cây DOM.
- **beforeUnmount**: Được gọi ngay trước khi một instance componet bị unmount. Khi hook này đc gọi thì instance vẫn hoạt động bình thường.
- **unmounted**: Được gọi sau khi thành phần đã được unmount. (Tất cả component con của nó bị unmount và tất cả các reactive effect như computed, watchers đã dừng lại).

// Mô tả kiến trúc component-based thông qua màn hình HOME

App
├─ Nav
├─ Header
├─ Cart
├─ Home
│   ├─ Hero
│   │
│   ├─ featureRow
│   │
│   ├─ Home_Deal_TopRated
│   │
│   │  ├─ DealsOfTheWeek
│   │  │   └─ HomeProductDeal
│   │  │
│   │  └─ TopRatedAuthor
│   │
│   ├─ HomeProductSection
│   │  └─ HomeProductCard
│   │
│   ├─ HomeBanner
│   │  └─ HomeProductCard
│   │
│   └─ Testimonial
│
└─ Footer