摘要：正文 所谓表单组件就是跟用户有交互的、能取到值的、是 form 的表单项的组件。在 Vue、React 中，store 里面的数据是严格控制其变动方式的，store 中的 state 只能通过 commit 触发改变。而 Svelte 中的 store 的更新是“自带”的，通过 set、update
阅读全文
摘要：正文 我们拿一个计数器举例，count 变量存在 store 中，我们用 count.set() 重置，用 count.subscribe() 订阅，用 count.update() 更新，一切看起来都很 OK，但实际上，如果想要更好的可维护性，这个 count 应该继续定义它的行为逻辑，也就是预定
阅读全文
摘要：正文 Svelte 中的 store 不仅有 state，也可以有 getters，不过名字叫：derived，不太好读，但英文意思很直观：衍生的，也就是说，经他生成的数据是由其他 state 衍生的，这其实就是 getters 的定义，而 getters 也可以理解成 store 中的计算属性，也
阅读全文
摘要：正文 下面代码中手动订阅与取消订阅的代码其实非常冗余，Svelte 提供了自动订阅的功能，可以自动为我们做订阅和取消订阅的操作。 <script> import { writable } from 'svelte/store' import {onDestroy} from 'svelte' con
阅读全文
摘要：正文 存在某些 store-state，它们的变动来源只依赖一个地方，且跟项目业务逻辑无关，这时其他地方都不会去修改它。比如获取当前时间，这时就不需要在特定组件里面去做修改，而是直接在设定 time 的时候，就将变动规则传给他，然后它就自己在那儿触发就行了，不需要管它。 <script> impor
阅读全文
摘要：正文 以简单计数器为例，计数变量放在 store-state 中，它使用 svelte/store 中的 writable 方法，它会返回一个对象，通过调用对象上的 .set(val) 进行重置、调用 .update((val) => ...) 进行更新、调用 .subscribe(val => .
阅读全文
摘要：正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <scrip
阅读全文
摘要：正文 用一个例子演示 Svelte 中所有生命周期函数的用法（实际上就是记几个单词）。 下面是父组件：App.svelte，子组件的挂载、卸载都靠它触发： <script> import Child from "./Child.svelte"; // state let status = false
阅读全文
摘要：正文 Vue 默认是将组件中一个名为 value 的 props 和 一个名为 'input' 的自定义事件作为 v-model 的配置项，从而实现自定义组件的双向绑定功能。而 Svelte 中的双向数据绑定则灵活得多，它被称为“组件绑定”，也就是对子组件暴露出来的 props 直接使用 bind:
阅读全文
摘要：正文 类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div
阅读全文
摘要：正文 也就是 Vue 和 React 中的 ref 值，但 Svelte 中的获取方法更加符合直觉：把 DOM 节点的 this 赋值给特定变量 <script> import { onMount } from "svelte"; let titleEl; console.log("组件尚未挂载，因
阅读全文
摘要：正文 下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script
阅读全文
摘要：正文 任何表单控件都可以绑定，只是绑定的属性有所不同而已（大部分是 value）。 <script> let value = 2; // let value = []; // 多选时为数组 const options = [ { name: "apple", value: 0 }, { name:
阅读全文
摘要：正文 需要两个属性配合使用才行，他们是：contenteditable 和 innerHTML，如下 <script> let htmlStr = ` <strong>Hello, World!</strong> `; </script> <!-- 纯文本 --> <div>{htmlStr}</d
阅读全文
摘要：正文 输入框组绑定指定是某些类型的 input 标签的值共同作用于一个变量，比如一个选择男女的单选框，它们的值的变化就应该作用于同一个变量，此时就可以用输入框组绑定功能：bind:group={gender}。 <script> let gender = 1; $: console.log(gend
阅读全文
摘要：正文 双向数据绑定是很实用的特性，Vue 中使用指令：v-model，在 Svelte 中使用：bind:value={value}，这里因为属性名和绑定的变量值名称相同，所以可以简写成：bind:value。 <script> let value = ""; </script> <div> <!-
阅读全文
摘要：正文 现在组件的层级是：<Father> 内嵌 <Child>，<Child> 内嵌 <GrandChild>，如果此时 Father 组件中定义的一个事件监听函数要在 <GrandChild> 组件中触发执行，则必定会经过中间组件：<Child>，下面是 <Child> 组件内的常规设置： <sc
阅读全文
摘要：正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- on
阅读全文
摘要：正文 不同于 React 中以 props 传递，Svelte 中的自定义事件更加类似 Vue，不过需要使用 createEventDispatcher() 构建一个事件派发器，而这一步在 Vue 中是使用 this.$emit() 实现的。 下面是子组件Nested.svelte，自定义事件将会在
阅读全文
摘要：正文 因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise
阅读全文
