Svelte là gì

Sau khi thao tác với React cùng Vue thì cá nhân mình muốn Vue rộng. Mặc cho dù tlỗi viện của React nhiều hơn thế tuy vậy cơ mà flow của Vue được tinc gọn hơn React khá nhiều. Vậy Svelte thì sao, code cùng flow bao gồm Gọn gàng rộng không? Cùng bản thân tìm hiểu nhé

*

Svelte cung ứng một trong những function đến lifecycle như:

onMount: run sau khi conponent thứ nhất được renderedonDestroy: runs lúc component bị hủybeforeUpdate: runs trước lúc DOM updated.afterUpdate: runs sau thời điểm DOM has been updated(nó là một phần của beforeUpdate).

Bạn đang xem: Svelte là gì

onMount

Đây là một trong những Một trong những function thường dùng duy nhất của Svelte. Tương từ bỏ như useEffect của React tuyệt mounted của Vue.

script>import onMount from "svelte";let photos = <>;onMount(async () => const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);photos = await res.json(););/script>h1>Pholớn album/h1>div class="photos">#each photos as photofigure>img src=photo.thumbnailUrl alt=photo lớn.title>figcaption>pholớn.title/figcaption>/figure>:else!-- this block renders when photos.length === 0 -->p>loading.../p>/each/div>Cái này có vẻ tương đương React rộng, với Vue thì bạn chẳng đề xuất import đồ vật gi cả

*

onDestroy

Tương tự destroyed của Vue

script>import onDestroy from "svelte";function onInterval(callbaông xã, milliseconds) const interval = setInterval(callback, milliseconds);onDestroy(() => clearInterval(interval););let seconds = 0;onInterval(() => seconds += 1, 1000);/script>p>The page has been open forseconds seconds === 1 ? "second" : "seconds"/p>beforeUpdate và afterUpdate

Khác với Vue, tạo thành beforeMount, beforeUpdate cùng updated thì Svelte chỉ gồm beforeUpdate với afterUpdate.

beforeUpdate được triển khai tức thì trước khi DOM được updated. afterUpdate cho nên trở lại, nó được sủ dụng nhằm run 1 lần khi DOM đã đồng hóa data.

script>import Eliza from "elizabot";import beforeUpdate, afterUpdate from "svelte";let div;let autoscroll;beforeUpdate(() => autoscroll = div &và (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20););afterUpdate(() => if (autoscroll) div.scrollTo(0, div.scrollHeight););const eliza = new Eliza();let comments = < author: "eliza", text: eliza.getInitial() >;function handleKeydown(event) if (event.key === "Enter") const text = sự kiện.target.value;if (!text) return;comments = comments.concat(author: "user",text);sự kiện.target.value = "";const reply = eliza.transform(text);setTimeout(() => comments = comments.concat(author: "eliza",text: "...",placeholder: true);setTimeout(() => comments = comments.filter(phản hồi => !phản hồi.placeholder).concat(author: "eliza",text: reply);, 500 + Math.random() * 500);, 200 + Math.random() * 200);/script>div class="chat">h1>Eliza/h1>div class="scrollable" bind:this=div>#each comments as commentarticle class=bình luận.author>span>bình luận.text/span>/article>/each/div>đầu vào on:keydown=handleKeydown>/div>

6. Store

writable

import writable from "svelte/store";export const count = writable(0);Sau đó, nhằm thực hiện, chúng ta import chúng nó vào những file svelte.

import count from "./stores.js";Đây thực ra là cú pháp khai báo function js cần sử dụng chung và trên đây không hẳn là state, tốt mutation nlỗi Vue. Mình nghĩ đó là mutation, cơ mà Svelte cũng đều có readable cho phép đổi khác data export.

Xem thêm: Keil Download Phần Mềm Keil Uvision 4 & V5 Full Crack, Keil C 4 Full

readable

import readable from "svelte/store";export const time = readable(new Date(), function start(set) const interval = setInterval(() => set(new Date());, 1000);return function stop() clearInterval(interval);;);Một cú pháp không giống cho phép bạn knhị báo 1 function.

derived

derived thì hỗ trợ export data

export const elapsed = derived(time,$time => Math.round(($time - start) / 1000));

7. Component Action

script>import spring from "svelte/motion";import pannable from "./pannable.js";const coords = spring( x: 0, y: 0 , stiffness: 0.2,damping: 0.4);function handlePanStart() coords.stiffness = coords.damping = 1;/script>div class="box"use:pannableon:panstart=handlePanStartstyle="transform:translate($coords.xpx,$coords.ypx)rotate($coords.x * 0.2deg)">/div>Quý khách hàng hoàn toàn có thể thấy, action của Svelte được knhì báo bằng cú pháp

on:=functionNameStore của Svelte ko rõ ràng cùng ngặt nghèo như flow của Nuxt giỏi Redux Saga nhưng ưu tiền về js thuần. Cũng dễ dàng nắm bắt bởi Svelte render theo hướng về tối ưu code thành js thuần cùng ko sử dụng DOM ảo.

8. Component composition

slots

Tương từ nlỗi slots vào Vue

div>slot name="name">/slot>/div>script>import ParentComponent from "./ParentComponent.svelte";/script>ParentComponent> div slot="name"> h2>Hello!/h2> p>This is an elment. It can contain anything./p> /div>/ParentComponent>slot fallbacks -

Thẻ có thể chấp nhận được bạn chèn element con mang định đến slot.

div>slot name="name">em>no nội dung was provided/em>/slot>/div>

9. Special elements

Một sự biệt lập của Svelte là một số element hơi đặc trưng như:

Ttuyệt vị viết

#if file.type === "folder"Folder ...file/>/ifbạn có thể đổi thành

#if file.type === "folder"svelte:self ...file/>/if

script>import RedThing from "./RedThing.svelte";import GreenThing from "./GreenThing.svelte";import BlueThing from "./BlueThing.svelte";const options = < color: "red", component: RedThing , color: "green", component: GreenThing , color: "blue", component: BlueThing ,>;let selected = options<0>;/script>select bind:value=selected>#each options as optionoption value=option>option.color/option>/each/select>svelte:component this=selected.component/>Quý khách hàng có thể thấy, cầm vì chưng nên kiểm tra component được lựa chọn nlỗi vậy

#if selected.color === "red"RedThing/>:else if selected.color === "green"GreenThing/>:else if selected.color === "blue"BlueThing/>/ifthì các bạn chỉ việc dùng .

Element này được cho phép bạn add một số sự kiện cho window như:

innerWidthinnerHeightouterWidthouterHeightscrollXscrollYonline — an alias for window.navigator.onLine

Ví dụ

svelte:window bind:scrollY=y/>

Tương từ bỏ nlỗi , được cho phép bạn set listen event đến documment.body

svelte:bodyon:mouseenter=handleMouseenteron:mouseleave=handleMouseleave/>

Element này được cho phép các bạn insert các elements vào

svelte:head>liên kết rel="stylesheet" href="tutorial/dark-theme.css">/svelte:head>h1>Hello world!/h1>

Tương từ Vue với React, Svelte cho bạn knhì báo tắt optionsTtốt vì

MyComponent immutable=true/>MyOtherComponent immutable=true name="name" type="basic"/>bạn cũng có thể viết như vậy

attrs = name: "name", type: "basic";MyComponent immutable/>MyOtherComponent attrs />Qua phần đông phần mình tìm hiểu về Svelte vào tutorial, có vẻ như Svelte cũng ổn định, khá tương tự Vue.

Điểm cộng:

Code gọn gàngHiệu năng được bảo đảm là cao bằng việc run trên thời gian build time và convert các components thành mã bổn phận tối ưu góp cập nhật DOM một phương pháp nhanh khô rộng.Thích hợp nhằm học trước khi tham gia học Vue và React bởi vì cú pháp ngắn gọn và kha khá dễ nắm bắt.

Điểm trừ:

Flow Store không ngặt nghèo với rõ ràngThỏng viện cung cấp còn ít

Tài liệu ttê mê khảo: https://svelte.dev/tutorial