怎样创建一个带 state 的 Svelte 组件

1 前言

props 很快就会安排，但现在得先知道 Svelte 怎样设置状态（state），它会像 React 一样需要 setState 才能更新吗？还是说像 Vue 里面响应式自动监听变动？

2 写一个带 state 的组件

明眼人都看得出来，响应式变量更方便，不用 setState，Svelte 中 state 的用法跟 Vue 很像，但实际上，跟它最像的是原生页面写法，就是在写一个 .html 文件的时候，里面的 script 内容是全局的，不需要 this，直接用即可。下面是用 Svelte 写的一个动态刷新当前时间的组件。

App.svelte

<script>
  let time = "";
  setInterval(() => {
    time = new Date().toLocaleString();
  }, 1000);
</script>

<h3>Now: {time}</h3>

3 总结

有状态组件中 state 行为与 Vue 类似，模板中使用单大括号包裹，没有 this。

4 参考

• https://www.sveltejs.cn/tutorial/adding-data

原文：https://www.cnblogs.com/ujiu/p/14862726.html