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 操作。

// 模板代码（编译前）
{{ msg }}

// 运行代码（编译后）
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文件分析

• +

  待办事项

  {#each contList as item}

  changeRadio(item)} /> {item}

  {/each}
  // App.svelte

  MarkList