Bài toán
Giả sử chúng ta có công thức tính tổng số tiền dựa vào số lượng và giá của sản phẩm như sau:
1 2 3 4 | <span class="token keyword">let</span> price <span class="token operator">=</span> <span class="token number">5</span> <span class="token keyword">let</span> quantity <span class="token operator">=</span> <span class="token number">2</span> <span class="token keyword">let</span> total <span class="token operator">=</span> price <span class="token operator">*</span> quantity <span class="token comment">// = 10</span> |
Nếu chúng ta thay đổi giá của sản phầm
1 2 3 | price <span class="token operator">=</span> <span class="token number">20</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>total<span class="token punctuation">)</span> <span class="token comment">// 10</span> |
Thì lúc này total vẫn bằng 10. Bởi vì đó là cách mà javascript hoạt động.
Vậy có cách nào để làm giá trị của total này trở nên reactive. Tức là giá trị của nó sẽ thay đổi dựa vào price và quantity? Chúng ta hãy cùng xem tiếp bài viết nhé 
Lời giải
Mình sẽ đặt phép tính total ở trên trong một hàm và tạm gọi nó là một effect
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">effect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> total <span class="token operator">=</span> price <span class="token operator">*</span> quantity <span class="token punctuation">}</span> |
Như vậy, để giải quyết bài toán trên, chúng ta sẽ tìm cách chạy lại hàm effect này mỗi khi price và quantity thay đổi.
Và để làm được điều đó, chúng ta sẽ định nghĩa price và quantity trong một object. Kiểu như sau:
1 2 3 4 5 | <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> price<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> quantity<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> |
Và effect của chúng ta sẽ trở thành
1 2 3 4 | <span class="token keyword">let</span> <span class="token function-variable function">effect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> total <span class="token operator">=</span> state<span class="token punctuation">.</span>price <span class="token operator">*</span> state<span class="token punctuation">.</span>quantity <span class="token punctuation">}</span> |
Tiếp theo chúng ta sẽ lặp qua từng property trong state object và sử dụng Object.defineProperty để định nghĩa lại getter và setter cho state như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 | Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> internalValue <span class="token operator">=</span> state<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token comment">// Phải khởi tạo biến này với let</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> internalValue<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span> internalValue <span class="token operator">=</span> newValue<span class="token punctuation">;</span> <span class="token function">effect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// lúc thay đổi giá trị sẽ chạy lại effect</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Như vậy, khi chúng ta gán giá trị state.price = 10 chẳng hạn thì nó sẽ chạy lại hàm effect.
Và thế là total được update!
Hơn nữa, chúng ta có thể tạo ra một hàm để sử dụng lại cho các object khác như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">const</span> <span class="token function-variable function">reactive</span> <span class="token operator">=</span> data <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> newData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>newData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> internalValue <span class="token operator">=</span> newData<span class="token punctuation">[</span>key<span class="token punctuation">]</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>newData<span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> internalValue<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span> internalValue <span class="token operator">=</span> newValue<span class="token punctuation">;</span> <span class="token function">effect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">return</span> newData<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Và state của chúng ta sẽ như sau:
1 2 3 4 5 | <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> price<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> quantity<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
OK, ngon lành rồi.
Mà khoan, xong rồi sao. Sao chưa thấy nói gì đến Proxy ?
Đây!. Với Proxy chúng ta có thể định nghĩa lại hàm reactive một cách ngắn gọn hơn như sau:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> <span class="token function-variable function">reactive</span> <span class="token operator">=</span> data <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token function">effect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Và nếu dùng Reflect:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> <span class="token function-variable function">reactive</span> <span class="token operator">=</span> data <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">)</span> <span class="token comment">// arguments trong mỗi function đều có mn nhé :) </span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span> Reflect<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">)</span> <span class="token function">effect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Bây giờ nếu khởi tạo state bằng reactive, chúng ta sẽ thu được một Proxy như sau:
OK, xịn xò.
Thật ra Proxy không chỉ giúp cho code của chúng ta ngắn gọn hơn mà còn giúp trong việc xử lý reactive với array,…
Ở bài viết này, mình chỉ giới thiệu khái quát một phần về reactive. Chúng ta có thể thấy effect trong thực tế cũng phải được lưu lại và tính toán như thế nào đó để có thể sử dụng nhiều effect cùng lúc.
Bài viết đến đây thôi, thật ra mình cũng không hiểu lắm đâu. Các bạn có thể tìm hiểu kỹ hơn ở link bên dưới nhé. Chúc các bạn thành công
Tài liệu tham khảo
https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity
https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system