Khám phá cơ bản về Reactivity trong vue.js: Composition API

Reactivity (phản ứng) là một trong những tính năng cốt lõi làm nên sức mạnh của Vue.js, cho phép tự động cập nhật giao diện người dùng khi dữ liệu thay đổi. Bài viết này sẽ giúp bạn hiểu rõ hơn về cơ chế hoạt động của Reactivity trong Vue.js, đặc biệt là khi sử dụng Composition API.

Khai báo trạng thái phản ứng (Reactive State)

Để khai báo trạng thái phản ứng trong Composition API, bạn có thể sử dụng hàm được khuyến nghị là ref().

VD:

import { ref } from 'vue' const count = ref(0)

Hàm ref() nhận đối số và trả về nó được gói trong một đối tượng ref. Đối tượng này có thuộc tính .value. Chúng ta có thể sử dụng .value để truy cập giá trị phản ứng.

VD:

const count = ref(0) console.log(count) // { value: 0 }
console.log(count.value) // 0 count.value++
console.log(count.value) // 1

Như trong ví dụ trên, chúng ta có thể truy cập đối tượng giá trị phản ứng: { value: 0 } với console.log(count). Chúng ta thấy rằng biến phản ứng được định nghĩa bằng count là một đối tượng. Kết quả là, hàm ref() nhận đối số và trả về nó được gói trong một đối tượng ref.

Nếu bạn muốn truy cập các tham chiếu trong template của component, chỉ cần khai báo và trả về chúng từ hàm setup() của component.

import { ref } from 'vue' export default { setup() { const count = ref(0) return { count } }
} 

<div>{{ count }}</div>

Khi sử dụng setup, bạn không cần sử dụng .value để truy cập biến phản ứng.

Lưu ý: setup là một hook đặc biệt dành riêng cho Composition API. Tôi sẽ giải thích hook setup trong một bài viết khác.

Bạn cũng có thể sửa đổi trực tiếp một tham chiếu trong trình xử lý sự kiện.

<button @click="count++"> {{ count }}
</button>

Xử lý logic phức tạp và giới thiệu Script Setup

Trong trường hợp này, bạn có thể nghĩ rằng đối với logic phức tạp hơn, chúng ta có thể không định nghĩa các hàm cho trình xử lý sự kiện. Đúng vậy, chúng ta có thể làm điều này.

import { ref } from 'vue' export default { setup() { const count = ref(0) function increment() count.value++ } return { count, increment } }
}

Bây giờ, hãy sử dụng hàm này.

<button @click="increment"> {{ count }}
</button>

Nếu bạn muốn kiểm tra, hãy xem Codepen.

Chúng ta đã đề cập đến setup ở đầu bài viết. Bây giờ, chúng ta sẽ nói về script setup, một phương pháp khác biệt và hữu ích hơn. Thay vì sử dụng setup, bạn có thể sử dụng script setup.

<script setup>
import { ref } from 'vue' const count = ref(0) function increment() { count.value++
}
</script> <template> <button @click="increment"> {{ count }} </button>
</template>

Tại sao lại sử dụng Refs?

Bạn có thể tự hỏi tại sao chúng ta cần các tham chiếu với .value thay vì các biến thông thường. Để giải thích điều này, chúng ta cần xem xét cách thức hệ thống Reactivity của Vue hoạt động.

Khi bạn sử dụng một tham chiếu trong template và sau đó thay đổi giá trị của tham chiếu, Vue sẽ tự động phát hiện thay đổi và cập nhật DOM cho phù hợp. Khi một component được tạo lần đầu tiên, Vue sẽ theo dõi mọi tham chiếu được sử dụng trong quá trình tạo. Sau đó, khi một tham chiếu bị thay đổi (mutate), nó sẽ kích hoạt re-render cho các component theo sau nó.

Thuộc tính .value cho phép Vue có cơ hội phát hiện khi nào một ref đã được truy cập hoặc thay đổi. Bên dưới, Vue thực hiện việc theo dõi trong getter của nó và thực hiện kích hoạt trong setter của nó. Về mặt khái niệm, bạn có thể coi một ref như một đối tượng trông như thế này.

const myRef = { _value: 0, get value() { track() return this._value }, set value(newValue) { this._value = newValue trigger() }
}

Reactivity sâu (Deep Reactivity)

Refs có thể chứa bất kỳ loại giá trị nào, bao gồm các đối tượng được lồng sâu, mảng hoặc các cấu trúc dữ liệu tích hợp sẵn của JavaScript như Map.

Một ref sẽ làm cho giá trị của nó có tính phản ứng sâu. Điều này có nghĩa là bạn có thể mong đợi những thay đổi sẽ được phát hiện ngay cả khi bạn thay đổi các đối tượng hoặc mảng được lồng nhau.

import { ref } from 'vue' const obj = ref({ nested: { count: 0 }, arr: ['foo', 'bar']
}) function mutateDeeply() { obj.value.nested.count++ obj.value.arr.push('baz')
}

Sử dụng reactive()

Có một cách khác để khai báo trạng thái phản ứng với API Reactive(). Không giống như ref, vốn gói giá trị bên trong thành một đối tượng tùy chỉnh, reactive() làm cho chính đối tượng đó trở nên phản ứng.

import { reactive } from 'vue' const state = reactive({ count: 0 })

Sử dụng trong template:

<button @click="state.count++"> {{ state.count }}
</button>

Vue có thể chặn việc truy cập và thay đổi tất cả các thuộc tính của một đối tượng reactive để theo dõi và kích hoạt reactivity.

Hạn chế của reactive()

API reactive() có một số hạn chế:

• Nó không thể chứa các kiểu dữ liệu nguyên thủy như string, number hoặc boolean.
• Không thể thay thế toàn bộ đối tượng: vì tính năng theo dõi reactivity của Vue hoạt động dựa trên quyền truy cập thuộc tính, chúng ta phải luôn giữ cùng một tham chiếu đến đối tượng reactive. Điều này có nghĩa là chúng ta không thể dễ dàng "thay thế" một đối tượng reactive vì kết nối reactivity với tham chiếu đầu tiên sẽ bị mất.

let state = reactive({ count: 0 }) // the above reference ({ count: 0 }) is no longer being tracked
// (reactivity connection is lost!)
state = reactive({ count: 1 })

• Không thân thiện với việc hủy cấu trúc (destructuring): khi chúng ta hủy cấu trúc thuộc tính kiểu nguyên thủy của đối tượng reactive thành các biến cục bộ hoặc khi chúng ta chuyển thuộc tính đó vào một hàm, chúng ta sẽ mất kết nối reactivity.

Do những hạn chế này, nên sử dụng ref() làm API chính để khai báo trạng thái phản ứng.

Kết luận

Trong bài viết này, chúng ta đã xem xét reactivity của Composition API trong Vue.js. Chúng ta đã tìm hiểu lý do tại sao nên sử dụng reactivity và xem xét một số phương pháp sử dụng. Cảm ơn các bạn đã theo dõi.