svelte小结

简单介绍

什么是svelte

Svelte是由RollupJs的作者RichHarris编写的编译型框架。

git地址: https://github.com/sveltejs/svelte

中文官网：https://www.sveltejs.cn/

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

完成了一个简易 提醒事项

使用了

1. 双向绑定
2. 循环
3. 基础事件绑定
4. 组件化引用

// 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>