共计 3184 个字符，预计需要花费 8 分钟才能阅读完成。
带你蜻蜓点水，细看新版变动。
留神：原文发表于 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 传递给组件
最新的模板语法
最显著的变动是：咱们对模板语法做了一些改良。
咱们常常听到的反馈是，“哎呀，又是 Mustache”或者“哎呀，这不 Handlebars 嘛”。
在 Web 开发的较早期间，许多开发者应用基于字符串的模板零碎，但他们仿佛对模板深痛恶绝。
因为 Svelte 也采纳了这种 {{表达式}} 的语法，因而许多人认为咱们也在某种程度上有那些雷同的局限性，比方奇怪的作用域规定，或者无奈随便应用 JavaScript 表达式。
提醒：如果你须要显示一个 ‘{‘ 字符，那么它能够简略地用 ‘{‘ 来示意。
除此以外，JSX 证实了应用双大括号其实大可不必。
所以咱们使得模板更加的 …… 怎么说呢，
Svelte 采纳单个大括号括起表达式。
应该说后果仿佛看起来更轻松了，打字时也更欢快了：
<h1>Hello {name}!</h1>当然也还有一些其余的更新的。
好消息是你不须要手动去一个一个地改，只须要在代码库上运行 svelte-upgrade 就行：
npx svelte-upgrade v2 src 这假设 src 目录下的任何 .html 文件都是一个小组件。
源目录和目标目录均能够任君自在指定，例如，你能够应用 npx svelte-upgrade v2 routes 更新 Sapper 利用。
要查看残缺的变更列表，请移尊步到 svelte-upgrade 的 README 文档。
计算属性
人们常常对 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 跟踪器 反馈给咱们。
< The End >
- 窗明几净，静候时日变迁 –
