开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

SVELTE是什么

svelte是什么,它是最近一段时间火起来的前端框架之一.根据官网描述.是一种全新的构建用户界面的方法(ps:上一个这样描述的是React).React和Vue在浏览器会做大量的工作,而它是在编译时就把在浏览器里面的事情给做好了,它是这样描述的. 同时它给自己说了三大优点,减少代码量,无虚拟DOM,真正的反应能力(不需要状态库). 那下面就让我们来见识见识吧.

SVELTE怎么做

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

看这段代码之后发现写法确实简单,比Vue少了模版语法,比React少了jsx语法. 看看输入的js是什么样的?

import {
   SvelteComponent,
   detach,
   element,
   init,
   insert,
   noop,
   safe_not_equal
} from "svelte/internal";

function create_fragment(ctx) {
   let h1;

   return {
   	c() {
   		h1 = element("h1");
   		h1.textContent = `Hello ${name}!`;
   	},
   	m(target, anchor) {
   		insert(target, h1, anchor);
   	},
   	p: noop,
   	i: noop,
   	o: noop,
   	d(detaching) {
   		if (detaching) detach(h1);
   	}
   };
}

let name = 'world';

class App extends SvelteComponent {
   constructor(options) {
   	super();
   	init(this, options, null, create_fragment, safe_not_equal, {});
   }
}

export default App;

确实是在编译阶段就把代码需要的方法就import好了,而不是全量打包进我们的生产代码,这点好评.

让我们来看看它的css能力? CSS 是默认限定在组件作用域内的，不再有样式冲突或优先级的问题。或者还可以使用 CSS-in-JS 库。由此可见,它也做了像Vue那样的组件样式隔离,也支持把我们的css写进html.

通过给局部变量赋值就能触发高效、细粒度的更新。剩余的事情交给编译器去处理。

<script>
	let count = 0;

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

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

这点是响应式更新,没有手动添加让变量变成响应式的API. 同时它也有个特别强大的动画引擎,帮助我们更好地构建UI.

svelte第一天

SVELTE是什么

SVELTE怎么做