Vuejs hoạt động như thế nào?

Vue không thao tác trực tiếp trên DOM thật mỗi khi thay đổi dữ liệu mà sẽ render ra một tree DOM ảo mới và so sánh với DOM cũ rồi sẽ re-render đúng phần thay đổi trên DOM thật

Phân biệt v-if và v-show

Giống nhau: v-show và v-if đều sử dụng hiển thị có điều kiện

Khác nhau:

v-show kiểm soát khả năng hiển thị của phần tử bằng thuộc tính display: none của CSS. Phần tử sẽ luôn được render trên DOM. Phù hợp cho các phần tử sử dụng ẩn hiện nhiều lần.
v-if sẽ check điều kiện của phần tử. Nếu true thì sẽ render ra DOM và false sẽ xoá khỏi DOM. Phù hợp cho các phần tử nặng, ít khi sử dụng để giảm tải hiệu suất mỗi lần re-render.

Cách tạo một component trong Vuejs

Global: Khai báo component với instance vue app.component("MyComponent")
Local: Sử dụng Single-File Component (SFC) với *.vue files, sau đó khi ta khai báo vue sẽ auto import component

nextTick() là gì và sử dụng khi nào?

Là một utility của Vue dùng để xử lý sau khi DOM được cập nhập
Ví dụ khi thay đổi reactive data, Vue không update DOM ngay mà sẽ đưa vào hàng đợi để tối ưu hiệu suất, nếu muốn truy cập vào DOM sau khi update thì phải dùng nextTick()

count.value++
await nextTick()

// Lúc này DOM đã cập nhật
console.log(document.querySelector('#count').textContent)

Mixins là gì?

Cung cấp phương thức để tái sử dụng logic trong Vue nhưng ở Vue3 khuyến khích nên sử dụng Composable functions sử dụng Composition API, dễ đọc dễ test hơn

// Ví dụ: Event catch position mouse
export function useMouse() {
    // state encapsulated and managed by the composable
    const x = ref(0)
    const y = ref(0)

    // a composable can update its managed state over time.
    function update(event: any) {
        x.value = event.pageX
        y.value = event.pageY
    }

    // a composable can also hook into its owner component's
    // lifecycle to setup and teardown side effects.
    onMounted(() => window.addEventListener('mousemove', update))
    onUnmounted(() => window.removeEventListener('mousemove', update))

    // expose managed state as return value
    return { x, y }
}

const { x, y } = useMouse();
<div>Mouse position is at: {{ x }}, {{ y }}</div>

Trong Vue3 có những cách nào truyền data?

Dùng v-model (two-binding)
Dùng props (one-binding) từ cha sang con (only read)
Dùng emits (one-binding) từ con lên cha thông qua functions
Dùng state trong pinia
Dùng provide/inject (không cần component trung gian, chỉ cần khai báo là nhận được)
Dùng defineExpose( data ) sau đó dùng useTemplateRef (version 3.5) hoặc ref để tham chiếu đến component đó rồi lấy ra

Watcher là gì?

Kích hoạt callback khi có một trạng thái nào đó thay đổi
Watch's có thể là một ref, một reactive, một getter function hoặc array
Khi watch(obj, (new, old) => {}) sẽ có giá trị giống nhau vì cùng trỏ đến cùng một đối tượng
Chỉ khi theo dõi sâu 1 property cụ thể thì sẽ có new and old value watch(() => obj.name, (old, new) => {})
Ngoài watch ta còn có watchEffect sẽ theo dõi toàn bộ các trạng thái thay đổi và mặc định chạy khi lần đầu render

const x = ref(0)
const y = ref(0)

// single ref
watch(x, (newX) => {})

// getter
watch(
  () => x.value + y.value,
  (sum) => {  }
)

// array of multiple sources
watch([x, () => y.value], ([newX, newY]) => {})

// chạy ngay khi lần đầu render, ta thêm property immediate = true (only watch)
watch(x, () => {}, { immediate: true })

// chỉ chạy một lần sau khi x thay đổi, ta thêm property once = true
watch(x, () => {}, { once: true })

const state = reactive({
  user: {
    name: 'Khắn',
    age: 27
  }
})

// Cách 1: Deep watch mặc định
watch(state, (val) => {
  // Với object lớn, Vue sẽ check lại toàn bộ object mỗi khi có thay đổi.
  // Điều này có thể gây tốn CPU/RAM không cần thiết.
})

⚠️ Khi bạn làm () => state, Vue sẽ không truy cập bất kỳ thuộc tính nào bên trong object, nên nó không thể biết cái gì cần theo dõi. () => gọi là getter functions chỉ track 1 thuộc tình cụ thể

// 🍀 Cách 2: Theo dõi chính xác 1 giá trị
watch(() => state.user.age, (newAge) => {
  // Chỉ trigger khi age thay đổi, không quan tâm tới name
})

Shallow Copy và Deep Copy là gì?

Shallow Copy là chỉ sao chép các tham chiếu ở cấp 1, nếu object lồng bên trong thay đổi thì bản sao cũng đổi theo
Deep Copy là sao chép toàn bộ dữ liệu, các object lồng nhau tách biệt hoàn toàn, thay đổi không bị ảnh hưởng đến nhau

ref với reactive khác nhau như nào?

ref dùng cho giá trị nguyên thuỷ hoặc object đơn, dùng .value để truy cập
reactive dùng cho các object phức tạp hoặc array, có thể truy cập trực tiếp

shallowRef và shallowReactive là gì?

Giống ref và reactive nhưng chỉ track ở cấp 1, object lồng bên trong không reactive, dùng để tối ưu hoá hiệu suất nếu không track sâu, cho các object phức tạp

Teleport là gì?

Teleport là cách render một phần tử DOM ra bên ngoài cây DOM của component thông qua to="", nhưng vẫn giữ nguyên data, props, emits
Phù hợp khi muốn truyền 1 component không bị phụ thuộc vào layout như notification, modal, tooltip

Khánh Phan