Svelte v2 已经过时了！

当前位置:

首页 > temp > JavaScript教程 >

Svelte v2 已经过时了！

注意：原文发表于2018-04-18，随着框架不断演进，部分内容可能已不适用。

大约是一年之前，我们首次在 Svelte 的 issue 跟踪器上讨论过 v2 版本，现在是时候进行一些重大变更了。

我们的座右铭是“循序渐进，破旧立新”。

……好吧，我错了，看来我要改过自新了。

这篇博文阐述了新版本的变化，都变了哪些地方、为什么要变以及应对的策略。

长话短说，先看梗概

我们会不厌其详地描述每一个变更细项，如果你还是遇到了困难，请在我们气氛友好的 Discord 聊天室中寻求帮助。

从 npm 安装 Svelte v2
用 svelte-upgrade 升级你的模板
删除对 component.observe 方法的调用，或者从 svelte-extras 中添加 observe 方法
将对 component.get('foo') 的调用重写为 component.get().foo
从你的自定义事件处理程序中返回 destroy，而不是 teardown
确保没有将值是数字类型的字符串作为 props 传递给组件

计算属性

人们经常对 Svelte 感到困惑的一件事情是计算属性的工作方式。

回顾一下，如果你有这么一个组件……

export  default  {
  computed:  {
    d: (a, b, c)  => a = b + c
  }
};

……Svelte 首先检查函数的参数，以便计算出 d 所依赖的参数是什么，然后它会自动编写好代码，在这些值发生改变时，通过将新值注入到函数中，从而更新 d。

很酷吧！

因为它允许你从组件的输入中获取复杂的值，而不必担心何时需要重新计算它们，但这用法也怪里怪气的。

JavaScript 语法不支持这么写。

在 v2，我们用解构来代替：

export  default  { 
  computed:  {  
    d: ({ a, b, c })  => a = b + c 
  }  
};

Svelte 编译器仍然可以知道 d 依赖哪个值，但不再注入值，而是将整个组件状态对象丢给每个计算的属性中。

友情提示：你同样不需要手动进行此更改，只需要对组件运行 svelte-upgrade，如上所示。

IE11，不好意思，好自为之

Svelte v1 生成的是 ES5 的代码，这样你就不会被迫使用转译器。

但现在都 2018 年了，几乎所有浏览器都支持现代 JavaScript。如果能抛弃 ES5 的束缚，我们就可以生成更精简的代码。

不过你如果还需要友好地支持 IE11，你还是可以用 Babel 或者 Bublé 之类的转译器的。

新的生命周期 Hook

除了 oncreate 和 ondestroy 外，Svelte v2 还添加了两个生命周期函数来响应状态更改：

export default {  
  onstate({ changed, current, previous }) {  
    // 在 oncreate 之前以及状态变更时触发  
  },  
  onupdate({ changed, current, previous }) {  
    // 在 oncreate 之后触发, 并且状态变更后更新了 DOM 时触发  
  }  
};

你还可以通过编写代码的方式监听这些事件：

component.on('state',  ({ changed, current, previous })  => {  
  // ...  
});

component.observe

使用新的生命周期函数，我们不再需要 component.observe(...) 方法：

// 之前  
export default {  
  oncreate() {  
    this.observe('foo', foo => { 
      console.log(`foo is now ${foo}`);  
    });  
  }  
};  

// 之后
export default {
  onstate({ changed, current }) {
    if (changed.foo) {
      console.log(`foo is now ${current.foo}`);  
    }  
  }  
};

这可以减少 Svelte 生成的代码量，并为你提供了更大的灵活性。

例如，现在可以十分容易在几个属性中的任何一个发生变更时响应这些动作，比方说在不释放观察者的情况下进行重绘 canvas。

不过如果你实在喜欢使用 component.observe(...)，你可以通过 svelte-extras 来支持这玩意。

import { observe } from 'svelte-extras';

export default {
  methods: { observe } 
};

component.get

这个方法不再接收可选的 key 参数 —— 相反，它总数返回整个 state 对象：

// 之前  
const foo =  this.get('foo');
const bar =  this.get('bar');  

// 之后
const  { foo, bar }  =  this.get();

初时，这种改变可能看起来很烦人，但这是正确的方向：

除了其他特殊情况外，将来我们会更充分地探索这个方面，它可能会在类型系统中发挥更好的作用。

event_handler.destroy

如果你的应用程序具有自定义的事件处理器，那么它必须返回一个带有 destroy 方法，而不是 teardown 方法。这样事件处理器就和组件的 API 对齐了。

不再严格要求类型

以前，传递给组件的数字类型的值会被视为纯数字：

<Counter  start='1'  />

这可能会导致一些意外行为。现在已经被更改了。

如果你需要传递数字的字面量，可以直接用表达式：

<Counter  start={1}  />

编译器方面的变更

在大多数情况下，你是永远不需要直接和编译器打交道的，因此编译器方面你其实不需要什么对策的。

不管怎么说，值得注意的是：编译器的 API 也是有变更的。

现在编译器将返回 js，css，ast 和 stats，而不是有一大堆属性的对象：

const { js, css, ast, stats }  = svelte.compile(source, options);

js 和 css 都是 {code, map} 对象，其中 code 是代码字符串，map 代表 sourcemap。

ast 是组件的抽象语法树，并且 stats 对象包含有关组件的元数据以及编译信息。

以前是有一个 svelte.validate 方法来检查你的组件是否有效的。

不过它已经被删掉了，如果你只需检查组件，而不实际对其进行编译的话，那么仅仅传递一个 generate: false选项即可。

我的应用还有问题要寻求帮助

希望以上的内容已经覆盖了所有可能的问题，并且更新对你来说，应该比较轻松从容的。

如果你发现错误或者本文未尽事项，请进入 Discord 聊天室里头转转看，或者在 issue 跟踪器反馈给我们。

出处：https://www.cnblogs.com/qianduanziyu/p/version-2.html

栏目列表

首页 > temp > JavaScript教程 >