更新是否会导致SVELTE组件给Rerender？

发布于 2025-01-20 23:29:23 字数 276 浏览 0 评论 0原文

当调用Svelte组件中的生命周期函数（假设AfterUpdate（））时。它会导致组件恢复吗？

例如，

<script>
    import { afterUpdate } from 'svelte';

    afterUpdate(() => {
        console.log('the component just updated');
    });
</script>

这仅仅是一个组件更新还是重新读取？

原文

When the lifecycle function(lets say afterUpdate()) in a Svelte component gets invoked. Does it cause the component to rerender?

For example

<script>
    import { afterUpdate } from 'svelte';

    afterUpdate(() => {
        console.log('the component just updated');
    });
</script>

Is this simply just a component updating or does rerendering occur?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阪姬 2025-01-27 23:29:23

afterupdate函数在组件更新后执行回调： https”> https ：//svelte.dev/docs#run time-svelte-afterupdate

这只是一个组件更新还是重新读取？

发生更新后，它只能让您做一些事情。当然，您可以更新属性，并且可以恢复组件，但是Svelte将为您管理所有内容，因此您必须担心无限的更新循环：

例如，这里的方法AfterUpdate将仅调用两次：

在安装上进行更改
在名称由于settimeout时更改时，

<script>
    import {afterUpdate} from 'svelte';
    let name = 'world';  
    let counter = 0;

    afterUpdate(() => name = `${name} ${counter++}`)
    
    setTimeout(() => name= 'everybody', 1000)
</script>

<h1>Hello {name}!</h1>

The afterUpdate function executes a callback after the component get updated: https://svelte.dev/docs#run-time-svelte-afterupdate

Is this simply just a component updating or does rerendering occur?

It simply lets you do something after an update occurred. Of course, you can update properties and it will rerender the component, but Svelte will manage everything for you so you have to worry about an infinite update loop:

For example, here the method afterUpdate will be called only twice:

on mount
when name change due to the setTimeout

<script>
    import {afterUpdate} from 'svelte';
    let name = 'world';  
    let counter = 0;

    afterUpdate(() => name = `${name} ${counter++}`)
    
    setTimeout(() => name= 'everybody', 1000)
</script>

<h1>Hello {name}!</h1>

回复收藏 0 原文

~没有更多了~