Vue.js Nâng Cao

Tính năng 1: Hệ Thống Template

Thách thức => Tạo các node động - điều kiện hiển thị v-if | component | component động | cấu trúc

Slots - Hình thức so sánh

Default Slot (Slot Mặc Định)

Component bên ngoài quản lý tham số và cấu trúc, bên trong sắp xếp vị trí

• Cách triển khai default slot => Tập hợp toàn bộ slot
• Nhiều slot muốn bố trí riêng biệt? | Nhiều default slot thì sao? => Lặp lại 'thay thế' khi render

Named Slot (Slot Có Tên)

Định danh slot bằng name, từ đó phân biệt được trong component

//App.vue  Parent
<template>
    <UserCard>
        <template v-slot:title>{{ pageTitle }}</template>
    </UserCard>
</template>

<script>
import UserCard from './components/UserCard.vue'
export default {
    name: 'App',
    components: {
        UserCard
    },
    data(){
        return {
            pageTitle: 'User Profile'
        }
    }
}
</script>

//UserCard.vue  Child
<template>
    <slot name="title"></slot>
</template>

• Lưu ý: name thực chất là đánh dấu một vùng context khi parse

Scoped Slot (Slot Có Phạm Vi)

Bên ngoài mô tả cấu trúc, bên trong truyền dữ liệu
Lưu ý: Truyền dữ liệu

//App.vue  Parent
<template>
    <UserCard>
        <template #detail='userData'>
            {{ userData }}
        </template>
    </UserCard>
</template>

<script>
import UserCard from './components/UserCard.vue'
export default {
    name: 'App',
    components: {
        UserCard
    },
    data(){
        return {
            pageTitle: 'User Profile'
        }
    }
}
</script>

//UserCard.vue  Child
<template>
    <slot name="detail"></slot>
</template>

<script>
export default {
    name: 'UserCard',
    data () {
        return {
            userData: 'scope slot - child truyền data cho parent'
        }
    }
}
</script>

Các Phương Thức Xử Lý Template

1. watch | computed

• Về sử dụng - Quy trình | Kết quả
• Về nguyên lý - watch: Theo dõi dữ liệu đã được interceptor, kích hoạt callback tương ứng | computed: Thu thập dependencies => Data Interceptor => Tính toán lại
• Các tùy chọn: once, immediate, deep: true

2. Các phương thức khác

Phương án một: Hàm - {{ calcValue(total) }}; Pipe {{ total | formatCurrency }}

Phương án hai: v-text='content' v-html='htmlContent'

Phương án ba: Gán trực tiếp - {{ ...biểu_thức_3_ngôi }}

JSX - Tự Do Hơn Với All In JS

Dùng để tạo các giải pháp linh hoạt và js hóa hơn => Vue không拒絕 (không từ chối)

Tính năng 2: Component Hóa

• 1. Trừu tượng hóa và tái sử dụng
• 2. Tinh gọn & Tổng hợp
• 3. Thứ tự render

Mixin - Trộn Logic

• 1. Ứng dụng: Tách logic chung (logic giống nhau, template khác nhau) <=> extends Kế thừa logic cốt lõi
• 2. Chiến lược merge
  • a. Bổ sung biến, nhiều mixins thì cái sau overwrite cái trước; không overwrite component gốc <=> đơn lẻ, không overwrite component gốc
  • b. Lifecycle giữa parent và child, nhiều mixins thì load theo thứ tự import <=> giữa parent và child, đơn lẻ
  • c. extends load trước mixin

Tính năng 3: Plugin Mở Rộng