简单介绍
什么是svelte
Svelte是由RollupJs的作者RichHarris编写的编译型框架。
git地址: https://github.com/sveltejs/svelte
svelte的和其他框架对比优势
-
减少代码量：
- Svelte支持静态编译，无需引入框架自身，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你感觉不到框架存在.
- Svelte 提供了一些简单好用的模板，使得维护和编写代码都变得比较简单,书写相较于Vue、react更加简单。
-
无虚拟DOM
- 虚拟DOM“高效”的误解。
-
真正的反应能力
- 区别于React和Vue,Svelte 的编译风格是将模板编译为命令式 (imperative) 的原生 DOM 操作。
// 模板代码（编译前）
<a>{{ msg }}</a>
// 运行代码（编译后）
function renderMainFragment ( root, component, target ) {
var a = document.createElement( 'a' );
var text = document.createTextNode( root.msg );
a.appendChild( text );
target.appendChild( a )
return {
update: function ( changed, root ) {
text.data = root.msg;
},
teardown: function ( detach ) {
if ( detach ) a.parentNode.removeChild( a );
}
};
}
引用：尤雨溪《如何看待 svelte 这个前端框架？》https://www.zhihu.com/question/53150351/answer/133912199
- Svelte会在代码编译的时候将每一个状态的改变转换为对应DOM节点的操作，从而在组件状态变化的时候快速高效地对DOM节点进行更新。
官方网站上详细的探讨了VDOM效率问题以及React更新DOM频繁的问题。原文地址https://www.sveltejs.cn/blog/virtual-dom-is-pure-overhead
svelte的不足
- 在一些case下存在很多重复代码
- 在大型应用中的性能还有待观察
- 抽象能力偏弱
开始使用
基础介绍
工具
官方脚手架svelte/template
git地址：https://github.com/sveltejs/template
npx degit sveltejs/template svelte-app
cd svelte-app
脚手架生成的模板分析
- 打包工具rollup
- main.js:将定义的APP组件挂在大目标节点body上。
- App.svelte:底层文件
- public/build/bundle.js:打包生成的js文件。可以看出Svelte编译完之后，框架代码会被转化为操作原生DOM节点的代码。
public/build/bundle.js
block对象主要包含以下四个重要的方法c（create），m（mount），p（update）和d（destroy）
function create() {
// 这个函数的功能是生成和APP组件相关的一些原生DOM节点，并且为他们添加一些元数据
}
function mount () {
//这个函数的功能是挂在C函数生成的那些DOM节点
}
function update () {
// p函数会在ctx上下文更新的时候去更新对应DOM节点的属性。大概就是当上下文变化的时候，检查一下name这个变量有没有变化，如果发生变化则更新DOM节点。
}
function destory () {
// 删除App组件
}
svelet文件分析
- <script>: 和组件相关的任何JavaScript代码都可以放在这里
- <style>: 默认局部生效的（scope）
- html: 组件的HTML标签部分，没有类似Vue的这种<template>限制
svelet生命周期
- onMount:将component挂载到DOM后立即执行的回调
- beforeUpdate:beforeUpdate执行该回调函数在组件状态改变但组件更新之前，但第一次被调用的时候在onMounted之前
- afterUpdate:在组件被更新之后调用
- onDestory:在组件卸载时调用的回调
- tick:tick的作用类似于vue中的nextTick,都是等到下一次更新的时候进行后续的一些操作。
简单demo
完成了一个简易 提醒事项
使用了
- 双向绑定
- 循环
- 基础事件绑定
- 组件化引用
// MarkList.svelte
<script>
let content = '';
let contList = [];
function addContent() {
contList.unshift(content);
contList = contList;
content = '';
}
function changeRadio(name) {
let index = contList.findIndex((item) => item === name);
contList.splice(index, 1);
contList = contList;
}
</script>
<div class="main">
<div class="center">
<input type="text" id="content" bind:value={content} />
<span class="plus" on:click={addContent}>+</span>
</div>
<div class="content center">待办事项</div>
{#each contList as item}
<div class="mt">
<input class="radio" type="radio" on:change={() => changeRadio(item)} />
<span>{item}</span>
</div>
{/each}
</div>
<style>
.main {
width: 300px;
margin: 0 auto;
text-align: left;
}
.plus {
font-size: 24px;
margin-left: 20px;
cursor: pointer;
}
.center {
text-align: center;
}
.mt {
margin-top: 20px;
}
.radio {
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0px;
vertical-align: middle;
}
.content {
margin-top: 20px;
color: #fb7299;
}
</style>
// App.svelte
<script>
import MarkList from './MarkList.svelte';
// export let name;
</script>
<main>
<h1>MarkList</h1>
<section>
<MarkList />
</section>
</main>
