怎样创建一个带 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

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

上一篇:关于一个《System.Windows.Markup.XamlParseException Message=设置属性“”时出现异常》问题的解决


下一篇:获得当前运行文件在服务器上的绝对路径