svelte返璞归真

Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。通俗来说，用svelte写的代码，经过编译处理，转化成了真正的js，不需要引入相应的库，不像vue项目需要引入vue.js、用写jQuery代码需要引入jQuery。

三大框架(vue/react/angular)已经趋于成熟，为何会出现svelte?假如我们写了以下代码：

{title}

目的是：title作为h1初始内容，当title发生变化时h1内容跟着更新。想要实现这一目标，最简单的方法就是直接渲染出 HTML，然后设置到innerHTML 中，但是当模板结构复杂时会带来很严重的性能问题。

虚拟DOM就是用来解决此种方案性能问题的，当状态发生变化时，新旧虚拟DOM树进行对比，然后只将少数差异的部分 patch 到真实 DOM 上，就能极大地提高性能。

这段代码就是要动态更新h1标签内容而已，每次数据发生变化都要生成新的DOM树->diff->patch，不是很有必要！

接下来看看svelte的骚操作，它会将这段模板编译成下面这段js：

function renderMainFragment ( root, component, target ) {
  var node = document.createElement( 'h1' );

  var text = document.createTextNode( root.title );
  node.appendChild( text );

  target.appendChild( node )

  return {
    update( changed, root ) {
      //数据变化时更新文本节点内容
      text.data = root.title;
    },

    teardown: function ( detach ) {
      //销毁时移除节点
      if ( detach ) node.parentNode.removeChild( node );
    }
  };
}

通过上面的描述，相信大家对svelte有一定了解了，接下来一睹芳容。
想快速尝鲜的可以去官网coding online 网址：svelte.dev
下面简单介绍框架的核心概念：

1.文件结构（以.svelte为后缀）

{title}

2.属性插值

3.标签插值解析HTML

{@html text}

4.条件语句

{#if login}
  
    退出登录
  
{/if}

{#if !login}
  
    登录
  
{/if}

5.遍历

  
  {#each list as item,index (item.id)}
      
{item.color}-----{index}
  {/each}

6.事件处理

  The mouse position is {m.x} x {m.y}

7.分割组件

  
1
  
2
  
3

8.组件传值 props

  {title}

9.自定义事件

  Click to say hello

10.表单双向绑定

Hello {name || 'stranger'}!

  
  {yes}

  {#each questions as question}
    
      {question.text}
    
  {/each}

{selected}

11.生命周期函数

onMount

tick 状态变化DOM更新之后

{num}

640.gif