svelte学习 — 简介和响应式-一一网

简介

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都是用来构建响应式用户界面的

特点

有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失 —- svelte更类似于编译器
可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销 — svelte是响应式的
Svelte 中，应用程序由一个或多个 组件（components） 构成。组件是一个可重用的、自包含的代码块，它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。

数据绑定

绑定值

<!-- 声明状态和方法的区域 -->
<script>
let ctx = 'Svelte'
</script>

<!-- 用户界面描述区域 -->
<!-- 可以使用{}的方式绑定对象 -->
<h1>Hello {ctx}!</h1>
<!-- {}中支持所有合法的js表达式 -->
<h1>Hello {ctx.toUpperCase()}</h1>
复制代码

绑定属性

<script>
  let src = 'tutorial/image.gif';
  let action = 'dance'
</script>

<!--
在svelte中为了保证视力或行动受限的用户，或者没有强大硬件或良好互联网连接的用户具有良好的用户体验
svelte会通过警告的方式要求开发者尽可能提升标签的可访问性(Accessibility，缩写为 a11y),
例如此处的alt属性
-->

<!-- 可以使用{}语法来绑定属性值 -->
<!-- 可以是属性值整体为变量或者仅仅只是值的一部分 -->
<img src={src} alt="a man {action}">

<!-- 如果属性值和属性名一直，可以省略属性名直接使用属性值 -->
<img {src} alt="a man {action}">
复制代码

绑定样式

<!-- 设置样式的部分 -->
<!-- 在style中设置的样式，默认是局部样式，也就是尽在当前组件内部生效 -->
<style>
  p {
    color: blue;
  }
</style>

<p>This is a paragraph.</p>
复制代码

引入子组件

<script>
  // 引入组件，在svelte中，引入的组件不需要注册，直接就可以使用
  import Nested from './Nested.svelte'
</script>

<style>
  p {
    color: purple;
  }
</style>

<p>This is a paragraph.</p>
<!-- 组件的首字母需要大写，以便于和一般HTML标签进行区分 -->
<Nested />
复制代码

@html

<script>
  let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<!-- @html只是对输出内容中html部分进行展示，对数据不会转换，所以可能会遇到XSS攻击 -->

<!-- this string contains some <strong>HTML!!!</strong> -->
<p>{string}</p>

<!-- @html === v-html  -->
<!-- this string contains some HTML!!! -->
<p>{@html string}</p>
复制代码

创建应用程序

import App from './App.svelte';

// 编译器将每个组件转换为常规的 JavaScript 类,所以使用的时候，我们通过new来初始化对应的实例对象即可
const app = new App({
  // 挂载点
	target: document.body,
	props: {
		// 传递给App组件的属性
		answer: 42
	}
});
复制代码

响应式

Svelete 的内核是一个强大的 （反应性）reactivity 系统，能够让 DOM 与你的应用程序状态保持同步

状态发生改变的时候，自动更新界面

当界面对应的事件被触发的时候，自动去寻找预先声明好的方法，并执行对应的逻辑

<script>
  let count = 0;

  function handleClick() {
    // 在svelte中，如果执行了赋值语句   
    // svelte会将对于的语句转换为一些特殊的代码，这些特殊的代码会通知svlete更新DOM 		
    count += 1
  }
</script>

<!-- 使用on:事件名={事件处理函数}的方式来绑定事件处理函数 -->
<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
复制代码

<script>
  let count = 0;

  // $：计算属性 = 对于的依赖关系表达式 
  // 这个依赖关系表达式中的外部依赖必须在响应式系统中，以便于svelte可以检测到外部依赖值的改变
  // 只有在外部依赖值改变的时候，计算属性才会改变，否则计算属性不会重新计算，直接使用之前已经计算出来的值
  // 计算属性会在组件被初始化的时候，就被调用  
  $: doubled = count * 2

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  add
</button>

<p>{count} doubled is {doubled}</p>
复制代码

<script>
	let count = 0;
  // svelte中不单单可以使用计算属性，还可以使用计算表达式 	
	$: console.log(count)

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
复制代码

<script>
	let count = 0;
  // svelte中的计算属性可以是代码块	
	$: {
		console.log('count', count)
		console.log('doubled',count* 2)
	}
	
	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
复制代码

<script>
	let count = 0;
  // 计算表达式后边甚至可以添加判断和循环依据
	$: if(count %2 !== 0) {
		console.log(count)
	}
  
 	$: for(let i = 0; i< count; i++){
		console.log(i)
	}
	
	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
复制代码

更新数组和对象

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    // svelte中检测数据的变化触发响应式是通过赋值语句来执行的
    // 所以类似于push，pop，shift，unshift等方法会改变数组的值
    // 但是svelte无法通知界面更新DOM
    numbers.push(numbers.length + 1);
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>
复制代码

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    numbers.push(numbers.length + 1);
    // 解决方法1：将更新后的代码赋值给本身，以便于触发svelte的响应式系统
    numbers = numbers
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>
复制代码

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    // 这是更为通用的做法:
    // 原则是: 被更新的变量的名称必须出现在赋值语句的左侧
    // 赋值给数组和对象的属性（properties） 
    //（例如，obj.foo += 1 或 array[i] = x）与对值本身进行赋值的方式相同
    numbers = [...numbers, numbers.length + 1]
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>
复制代码