Sau khi làm việc với React và Vue thì cá nhân mình thích Vue hơn. Mặc dù thư viện của React nhiều hơn nhưng mà flow của Vue được tinh gọn hơn React khá nhiều. Vậy Svelte thì sao, code và flow có gọn gàng hơn không? Cùng mình tìm hiểu nhé
Đầu tiên, đây là một ví dụ code kinh điển cho thấy sự gọn gàng của Svelte so với Vue và React
Giả sử chúng ta có bài toán: Tính tổng 2 số a và b
- Input: a, b
- Output: Tổng của a và b
Đây là code với React
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> setA<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> setB<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">handleChangeA</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setA</span><span class="token punctuation">(</span><span class="token operator">+</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleChangeB</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setB</span><span class="token punctuation">(</span><span class="token operator">+</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> value<span class="token operator">=</span><span class="token punctuation">{</span>a<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChangeA<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> value<span class="token operator">=</span><span class="token punctuation">{</span>b<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChangeB<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>a<span class="token punctuation">}</span> <span class="token operator">+</span> <span class="token punctuation">{</span>b<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>a <span class="token operator">+</span> b<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Còn đây là với Vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> v<span class="token operator">-</span>model<span class="token punctuation">.</span>number<span class="token operator">=</span><span class="token string">"a"</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> v<span class="token operator">-</span>model<span class="token punctuation">.</span>number<span class="token operator">=</span><span class="token string">"b"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span>a<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">+</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>b<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>a <span class="token operator">+</span> b<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</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 operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
và với Svelte, chúng ta chỉ cần như vậy
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token punctuation">{</span>a<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"number"</span> bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token punctuation">{</span>b<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>a<span class="token punctuation">}</span> <span class="token operator">+</span> <span class="token punctuation">{</span>b<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>a <span class="token operator">+</span> b<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> |
Có vẻ là khá gọn gàng đó, nhưng đừng vội kết luận, vì thực tế phần lớn ứng dụng của chúng ta sẽ dựng riêng Fronend (FE) và Backend (BE). Vue, React hay Svelte thì cũng chủ yếu là hỗ trợ FE, và với những đoạn code như thế này, thì chưa thể nói lên điều gì, vì phần lớn logic sẽ được xử lý phía BA.
Giờ thì đi sâu hơn nào, và chúng ta sẽ cùng tìm hiểu một số systax để phân tích nhiều hơn nhé
1. Props
Tương tự React nhưng việc khai báo props của Svelte được tối ưu rất đơn giản
1 2 3 4 5 6 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> Nested <span class="token keyword">from</span> <span class="token string">'./Nested.svelte'</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>Nested answer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">42</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> |
1 2 3 4 5 6 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> answer <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> We have <span class="token punctuation">{</span>answer<span class="token punctuation">}</span> <span class="token function">answer</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">.</span> |
2. Logic
If-else
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> loggedIn<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> user<span class="token punctuation">.</span>loggedIn <span class="token operator">=</span> <span class="token operator">!</span>user<span class="token punctuation">.</span>loggedIn<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token punctuation">{</span>#<span class="token keyword">if</span> <span class="token operator"><</span>condition<span class="token operator">></span><span class="token punctuation">}</span> <span class="token comment">//code</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token operator"><</span>condition<span class="token operator">></span><span class="token punctuation">}</span> <span class="token comment">// code</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span><span class="token punctuation">}</span> <span class="token comment">//code</span> <span class="token punctuation">]</span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span> |
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> loggedIn<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> user<span class="token punctuation">.</span>loggedIn <span class="token operator">=</span> <span class="token operator">!</span>user<span class="token punctuation">.</span>loggedIn<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token punctuation">{</span>#<span class="token keyword">if</span> user<span class="token punctuation">.</span>loggedIn<span class="token punctuation">}</span> <span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</span><span class="token punctuation">{</span>toggle<span class="token punctuation">}</span><span class="token operator">></span> Log out <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span><span class="token punctuation">}</span> <span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</span><span class="token punctuation">{</span>toggle<span class="token punctuation">}</span><span class="token operator">></span> Log <span class="token keyword">in</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span> |
Loop
1 2 3 4 | <span class="token punctuation">{</span>#each list_name <span class="token keyword">as</span> key_name <span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token comment">//</span> <span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span> |
Wait Block
Về systax logic thì wait block là phần hay ho nhất. Tương tự như cấu trúc try-catch. Wait Block cho phép chúng ta xây dựng logic xử lý một promise. Điều này là rất cần thiết khi FE tương tác với phía BA.
1 2 3 4 5 6 7 8 | <span class="token punctuation">{</span>#<span class="token keyword">await</span> promise_name<span class="token punctuation">}</span> <span class="token comment">//code</span> <span class="token punctuation">{</span><span class="token operator">:</span>then params<span class="token punctuation">}</span> <span class="token comment">//code</span> <span class="token punctuation">{</span><span class="token operator">:</span>catch error<span class="token punctuation">}</span> <span class="token comment">// code</span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">await</span><span class="token punctuation">}</span> |
Thực tế thì những đoạn code như này có vẻ hơi dài dòng so với systax rút gon 😕
nhỉ?
3. Event
DOM Events
Svelte sử dụng keyword on
, systax
1 2 | <span class="token operator"><</span>Component on<span class="token operator">:</span>event_name<span class="token operator">|</span>modifier<span class="token operator">=</span><span class="token punctuation">{</span>function_name<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> |
Các modifiers được hỗ trợ bao gồm:
- preventDefault — calls event.preventDefault() before running the handler. Useful for client-side form handling, for example.
- stopPropagation — calls event.stopPropagation(), preventing the event reaching the next element
- passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it’s safe to do so)
- nonpassive — explicitly set passive: false
- capture — fires the handler during the capture phase instead of the bubbling phase ()
- once — remove the handler after the first time it runs
- self — only trigger handler if event.target is the element itself
Ví dụ:
1 2 | <button on:click|once={handleClick}>Click</button> |
Cái này thì cũng tương tự như Vue rồi
Event forwarding
Nếu Vue hỗ trợ $emit
thì Svelte hỗ trợ event forwarding.
Dưới đây là một ví dụ, chúng ta có thể định nghĩa 1 dispatch event và gọi đến nó bằng cách sử dụng systax on:event_name
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> Inner <span class="token keyword">from</span> <span class="token string">'./Inner.svelte'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">handleMessage</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>Inner on<span class="token operator">:</span>sendMessage<span class="token operator">=</span><span class="token punctuation">{</span>handleMessage<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createEventDispatcher <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> dispatch <span class="token operator">=</span> <span class="token function">createEventDispatcher</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'sendMessage'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Hello!'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</span><span class="token punctuation">{</span>sayHello<span class="token punctuation">}</span><span class="token operator">></span> Click to say hello <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> |
4. Binding
Thay vì dùng :binding_name=
rút gọn như Vue, ở đây chúng ta có cú pháp bind:binding_name
1 2 | <span class="token operator"><</span>input bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator">></span> |
Lại một cú pháp tương tự Vue, nhưng Svelte không có hỗ trợ cú pháp rút gọn.
5. Lifecycle
Svelte hỗ trợ một số function cho lifecycle như:
- onMount: run sau khi conponent đầu tiên được rendered
- onDestroy: runs khi component bị hủy
- beforeUpdate: runs trước khi DOM updated.
- afterUpdate: runs sau khi DOM has been updated(nó là 1 phần của beforeUpdate).
onMount
Đây là 1 trong những function hay được sử dụng nhất của Svelte. Tương tự như useEffect
của React hay mounted
của Vue.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> <span class="token punctuation">{</span> onMount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span> <span class="token keyword">let</span> photos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token function">onMount</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://jsonplaceholder.typicode.com/photos?_limit=20</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> photos <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</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 operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Photo album<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"photos"</span><span class="token operator">></span> <span class="token punctuation">{</span>#each photos <span class="token keyword">as</span> photo<span class="token punctuation">}</span> <span class="token operator"><</span>figure<span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>photo<span class="token punctuation">.</span>thumbnailUrl<span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token punctuation">{</span>photo<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>figcaption<span class="token operator">></span><span class="token punctuation">{</span>photo<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>figcaption<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>figure<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token keyword">this</span> block renders when photos<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>loading<span class="token operator">...</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Cái này có vẻ giống React hơn, với Vue thì bạn chẳng cần import cái gì cả
onDestroy
Tương tự destroyed
của Vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> <span class="token punctuation">{</span> onDestroy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">onInterval</span><span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span> milliseconds</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> interval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> milliseconds<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<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">let</span> seconds <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token function">onInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> seconds <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span> The page has been open <span class="token keyword">for</span> <span class="token punctuation">{</span>seconds<span class="token punctuation">}</span> <span class="token punctuation">{</span>seconds <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'second'</span> <span class="token operator">:</span> <span class="token string">'seconds'</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> |
beforeUpdate và afterUpdate
Khác với Vue, chia thành beforeMount, beforeUpdate và updated thì Svelte chỉ có beforeUpdate và afterUpdate.
beforeUpdate được thực thi ngay trước khi DOM được updated. afterUpdate thì là ngược lại, nó được sủ dụng để run 1 lần khi DOM đã đồng bộ data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> Eliza <span class="token keyword">from</span> <span class="token string">'elizabot'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> beforeUpdate<span class="token punctuation">,</span> afterUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span> <span class="token keyword">let</span> div<span class="token punctuation">;</span> <span class="token keyword">let</span> autoscroll<span class="token punctuation">;</span> <span class="token function">beforeUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> autoscroll <span class="token operator">=</span> div <span class="token operator">&&</span> <span class="token punctuation">(</span>div<span class="token punctuation">.</span>offsetHeight <span class="token operator">+</span> div<span class="token punctuation">.</span>scrollTop<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token punctuation">(</span>div<span class="token punctuation">.</span>scrollHeight <span class="token operator">-</span> <span class="token number">20</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 function">afterUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>autoscroll<span class="token punctuation">)</span> div<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> div<span class="token punctuation">.</span>scrollHeight<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">const</span> eliza <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eliza</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> comments <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> author<span class="token operator">:</span> <span class="token string">'eliza'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> eliza<span class="token punctuation">.</span><span class="token function">getInitial</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">function</span> <span class="token function">handleKeydown</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'Enter'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> text <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>text<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> comments <span class="token operator">=</span> comments<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> author<span class="token operator">:</span> <span class="token string">'user'</span><span class="token punctuation">,</span> text <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">const</span> reply <span class="token operator">=</span> eliza<span class="token punctuation">.</span><span class="token function">transform</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> comments <span class="token operator">=</span> comments<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> author<span class="token operator">:</span> <span class="token string">'eliza'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span> placeholder<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> comments <span class="token operator">=</span> comments<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">comment</span> <span class="token operator">=></span> <span class="token operator">!</span>comment<span class="token punctuation">.</span>placeholder<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> author<span class="token operator">:</span> <span class="token string">'eliza'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> reply <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 number">500</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"chat"</span><span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Eliza<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"scrollable"</span> bind<span class="token operator">:</span><span class="token keyword">this</span><span class="token operator">=</span><span class="token punctuation">{</span>div<span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>#each comments <span class="token keyword">as</span> comment<span class="token punctuation">}</span> <span class="token operator"><</span>article <span class="token keyword">class</span><span class="token operator">=</span><span class="token punctuation">{</span>comment<span class="token punctuation">.</span>author<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span>comment<span class="token punctuation">.</span>text<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>article<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>input on<span class="token operator">:</span>keydown<span class="token operator">=</span><span class="token punctuation">{</span>handleKeydown<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
6. Store
writable
1 2 3 4 | <span class="token keyword">import</span> <span class="token punctuation">{</span> writable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte/store'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">writable</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Sau đó, để sử dụng, chúng ta import chúng vào các file svelte.
1 2 | <span class="token keyword">import</span> <span class="token punctuation">{</span> count <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./stores.js'</span><span class="token punctuation">;</span> |
Đây thực chất là cú pháp khai báo function js dùng chung và đây không hẳn là state, hay mutation như Vue. Mình nghĩ đây là mutation, nhưng Svelte cũng có readable cho phép thay đổi data export.
readable
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">import</span> <span class="token punctuation">{</span> readable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte/store'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> time <span class="token operator">=</span> <span class="token function">readable</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">set</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> interval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">set</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</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 number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<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> |
Một cú pháp khác cho phép bạn khai báo 1 function.
derived
derived thì hỗ trợ export data
1 2 3 4 5 | export const elapsed = derived( time, $time => Math.round(($time - start) / 1000) ); |
7. Component Action
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> <span class="token punctuation">{</span> spring <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte/motion'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> pannable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./pannable.js'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> coords <span class="token operator">=</span> <span class="token function">spring</span><span class="token punctuation">(</span><span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> stiffness<span class="token operator">:</span> <span class="token number">0.2</span><span class="token punctuation">,</span> damping<span class="token operator">:</span> <span class="token number">0.4</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">handlePanStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> coords<span class="token punctuation">.</span>stiffness <span class="token operator">=</span> coords<span class="token punctuation">.</span>damping <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box"</span> use<span class="token operator">:</span>pannable on<span class="token operator">:</span>panstart<span class="token operator">=</span><span class="token punctuation">{</span>handlePanStart<span class="token punctuation">}</span> style<span class="token operator">=</span>"transform<span class="token operator">:</span> <span class="token function">translate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>$coords<span class="token punctuation">.</span>x<span class="token punctuation">}</span>px<span class="token punctuation">,</span><span class="token punctuation">{</span>$coords<span class="token punctuation">.</span>y<span class="token punctuation">}</span>px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>$coords<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token number">0.2</span><span class="token punctuation">}</span>deg<span class="token punctuation">)</span>" <span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Bạn có thể thấy, action của Svelte được khai báo bằng cú pháp
1 2 | on:<eventName>={functionName} |
Store của Svelte không rõ ràng và chặt chẽ như flow của Nuxt hay Redux Saga mà thiên về js thuần. Cũng dễ hiểu vì Svelte render theo hướng tối ưu code thành js thuần và không sử dụng DOM ảo.
8. Component composition
slots
Tương tự như slots
trong Vue
1 2 3 4 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>slot name<span class="token operator">=</span><span class="token string">"name"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>slot<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
1 2 3 4 5 6 7 8 9 10 11 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> ParentComponent <span class="token keyword">from</span> <span class="token string">'./ParentComponent.svelte'</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>ParentComponent<span class="token operator">></span> <span class="token operator"><</span>div slot<span class="token operator">=</span><span class="token string">"name"</span><span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>Hello<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>This is an elment<span class="token punctuation">.</span> It can contain anything<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ParentComponent<span class="token operator">></span> |
slot fallbacks – <em>
Thẻ <em>
cho phép bạn chèn element con mặc định cho slot.
1 2 3 4 5 6 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>slot name<span class="token operator">=</span><span class="token string">"name"</span><span class="token operator">></span> <span class="token operator"><</span>em<span class="token operator">></span>no content was provided<span class="token operator"><</span><span class="token operator">/</span>em<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>slot<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
9. Special elements
Một sự khác biệt của Svelte là một số element khá đặc biệt như:
<svelte:self>
<svelte:component>
<svelte:window>
<svelte:body>
<svelte:head>
<svelte:options>
<svelte:self>
Thay vì viết
1 2 3 4 | <span class="token punctuation">{</span>#<span class="token keyword">if</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'folder'</span><span class="token punctuation">}</span> <span class="token operator"><</span>Folder <span class="token punctuation">{</span><span class="token operator">...</span>file<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span> |
bạn có thể đổi thành
1 2 3 4 | <span class="token punctuation">{</span>#<span class="token keyword">if</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'folder'</span><span class="token punctuation">}</span> <span class="token operator"><</span>svelte<span class="token operator">:</span>self <span class="token punctuation">{</span><span class="token operator">...</span>file<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span> |
<svelte:component>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> RedThing <span class="token keyword">from</span> <span class="token string">'./RedThing.svelte'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> GreenThing <span class="token keyword">from</span> <span class="token string">'./GreenThing.svelte'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> BlueThing <span class="token keyword">from</span> <span class="token string">'./BlueThing.svelte'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> RedThing <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> GreenThing <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> BlueThing <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> selected <span class="token operator">=</span> options<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>select bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>#each options <span class="token keyword">as</span> option<span class="token punctuation">}</span> <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token punctuation">{</span>option<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>option<span class="token punctuation">.</span>color<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>select<span class="token operator">></span> <span class="token operator"><</span>svelte<span class="token operator">:</span>component <span class="token keyword">this</span><span class="token operator">=</span><span class="token punctuation">{</span>selected<span class="token punctuation">.</span>component<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> |
Bạn có thể thấy, thay vì phải check component được chọn như vậy
1 2 3 4 5 6 7 8 | <span class="token punctuation">{</span>#<span class="token keyword">if</span> selected<span class="token punctuation">.</span>color <span class="token operator">===</span> <span class="token string">'red'</span><span class="token punctuation">}</span> <span class="token operator"><</span>RedThing<span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span> <span class="token keyword">if</span> selected<span class="token punctuation">.</span>color <span class="token operator">===</span> <span class="token string">'green'</span><span class="token punctuation">}</span> <span class="token operator"><</span>GreenThing<span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword">else</span> <span class="token keyword">if</span> selected<span class="token punctuation">.</span>color <span class="token operator">===</span> <span class="token string">'blue'</span><span class="token punctuation">}</span> <span class="token operator"><</span>BlueThing<span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span> |
thì bạn chỉ cần dùng <svelte:component>
.
<svelte:window>
Element này cho phép bạn add 1 số event cho window như:
- innerWidth
- innerHeight
- outerWidth
- outerHeight
- scrollX
- scrollY
- online — an alias for window.navigator.onLine
Ví dụ
1 2 | <span class="token operator"><</span>svelte<span class="token operator">:</span>window bind<span class="token operator">:</span>scrollY<span class="token operator">=</span><span class="token punctuation">{</span>y<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> |
<svelte:body>
Tương tự như <svelte:window>
, <svelte:body>
cho phép bạn set listen event cho documment.body
1 2 3 4 5 | <span class="token operator"><</span>svelte<span class="token operator">:</span>body on<span class="token operator">:</span>mouseenter<span class="token operator">=</span><span class="token punctuation">{</span>handleMouseenter<span class="token punctuation">}</span> on<span class="token operator">:</span>mouseleave<span class="token operator">=</span><span class="token punctuation">{</span>handleMouseleave<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> |
<svelte:head>
Element này cho phép bạn insert các elements vào <head>
1 2 3 4 5 6 | <span class="token operator"><</span>svelte<span class="token operator">:</span>head<span class="token operator">></span> <span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"tutorial/dark-theme.css"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>svelte<span class="token operator">:</span>head<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> |
<svelte:options>
Tương tự Vue và React, Svelte cho bạn khai báo tắt options
Thay vì
1 2 3 | <span class="token operator"><</span>MyComponent immutable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>MyOtherComponent immutable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span> name<span class="token operator">=</span><span class="token string">'name'</span> type<span class="token operator">=</span><span class="token string">'basic'</span><span class="token operator">/</span><span class="token operator">></span> |
bạn có thể viết như vậy
1 2 3 4 5 6 7 | attrs <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'basic'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator"><</span>MyComponent immutable<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>MyOtherComponent <span class="token punctuation">{</span>attrs<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> |
Qua những phần mình tìm hiểu về Svelte trong tutorial, có vẻ Svelte cũng ổn, khá giống Vue.
Điểm cộng:
- Code gọn gàng
- Hiệu năng được đảm bảo là cao bằng việc run tại thời điểm build time và convert các components thành mã mệnh lệnh tối ưu giúp cập nhật DOM một cách nhanh hơn.
- Thích hợp để học trước khi học Vue và React vì cú pháp ngắn gọn và tương đối dễ hiểu.
Điểm trừ:
- Flow Store không chặt chẽ và rõ ràng
- Thư viện hỗ trợ còn ít
Tài liệu tham khảo: https://svelte.dev/tutorial