{"id":1345,"date":"2019-09-18T09:40:43","date_gmt":"2019-09-18T01:40:43","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1345"},"modified":"2022-02-17T15:11:19","modified_gmt":"2022-02-17T07:11:19","slug":"2020ironman-svelte-component-lifecycle","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/18\/2020ironman-svelte-component-lifecycle\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY17- \u5143\u4ef6\u7684\u751f\u547d\u9031\u671f"},"content":{"rendered":"

svelte component lifecycle<\/h1>\n

svelte component lifecycle \u662f\u4eca\u5929\u8981\u5206\u4eab\u7684\u4e3b\u984c\uff0c\u5728\u5206\u4eabsvelte\u7684\u8907\u5408\u5f0f\u5143\u4ef6 slot<\/a>\u958b\u59cb\u8981\u5206\u4eab\u4e00\u4e9b\u9032\u968e\u7684\u5167\u5bb9\uff0c\u4eca\u5929\u7684\u5167\u5bb9\u5148\u5f9e\u751f\u547d\u9031\u671f\u958b\u59cb\u3002<\/p>\n

\u751f\u547d\u9031\u671f\u8ddf\u958b\u767c\u6709\u751a\u9ebc\u95dc\u4fc2<\/h2>\n

\u901a\u5e38\u8981\u8aaa\u660e\u9019\u985e\u4e3b\u984c\u6642\uff0c\u8b80\u8005\u5011\u90fd\u6703\u554f\u751f\u547d\u9031\u671f\u8ddf\u6211\u5011\u6709\u751a\u9ebc\u95dc\u4fc2\uff0c\u8a66\u60f3\u4e00\u4e0b\uff0c\u5982\u679c\u6709\u4e9b\u4e8b\u60c5\u5728\u8f09\u5165\u5143\u4ef6\u6642\u8981\u57f7\u884c\u4e00\u6b21\u8981\u5982\u4f55\u8655\u7406\uff0c\u6216\u8005\u53c8\u6709\u4e9b\u8a3b\u518a\u7684\u4e8b\u4ef6\u5728\u7d50\u675f\u6642\u8981\u53d6\u6d88\u8a3b\u518a\u53c8\u8a72\u5982\u4f55\u8655\u7406\uff0c\u9084\u6709\u9019\u4e9b\u751f\u547d\u9031\u671f\u7684\u9806\u5e8f\u662f\u600e\u9ebc\u6a23\u6392\u5217\u7684\uff0c\u8af8\u5982\u6b64\u985e\u7684\u554f\u984c\u90fd\u662f\u9032\u4e00\u6b65\u958b\u767c\u6642\u6703\u9047\u5230\u7684\u554f\u984c\uff0c\u4eca\u5929\u9019\u500b\u4e3b\u984c\u5c31\u4f86\u8aaa\u660e\u4e00\u4e0bsvelte \u5143\u4ef6\u7684\u751f\u547d\u9031\u671f\uff0c\u4ee5\u53ca\u5982\u4f55\u64b0\u5beb\u4e8b\u4ef6\u8655\u7406\u3002<\/p>\n

svelte component lifecycle \u6709\u54ea\u4e9b<\/h2>\n

\u4eca\u5929\u5206\u4eab\u7684\u5167\u5bb9\u6703\u8aaa\u660e\u5e38\u7528\u7684svelte\u5143\u4ef6\u7684\u751f\u547d\u9031\u671f\u6709\u54ea\u4e9b\uff0c\u9084\u6709\u5982\u4f55\u4f7f\u7528\uff0c\u82e5\u662f\u6709\u8208\u8da3\u4e86\u89e3\u5176\u4ed6\u672a\u63d0\u53ca\u7684\u751f\u547d\u9031\u671f\u4e8b\u4ef6\u7684\u670b\u53cb\u53ef\u4ee5\u770b\u4e00\u4e0bsvelte api\u6587\u4ef6<\/a>\uff0c\u6240\u4ee5\u6211\u5011\u5148\u5f9e\u639b\u8f09\u5143\u4ef6\u7684\u4e8b\u4ef6\u958b\u59cb\u4ecb\u7d39\u3002<\/p>\n

onMount<\/h3>\n

\u9019\u662f\u6240\u6709\u5143\u4ef6\u958b\u59cb\u7684\u7b2c\u4e00\u6b65\uff0c\u7576\u6240\u6709\u7684\u5143\u4ef6\u88ab\u8f09\u5165\u6642\u90fd\u6703\u5148\u9032\u5165\u9019\u500b\u4e8b\u4ef6\u7576\u4e2d\uff0c\u6240\u4ee5\u5728\u9019\u88e1\u5c31\u53ef\u4ee5\u53bb\u57f7\u884cfetch\u8f09\u5165\u8a2d\u5b9a\u6a94\u4e4b\u985e\u7684\u52d5\u4f5c\u3002<\/p>\n

beforeUpdate<\/h3>\n

\u9019\u662f\u5143\u4ef6\u958b\u59cb\u66f4\u65b0\u6642\u6703\u9032\u5165\u7684\u4e8b\u4ef6\uff0c\u6240\u4ee5\u53ef\u4ee5\u653e\u4e00\u4e9b\u6b0a\u9650\u6aa2\u67e5\u7684\u908f\u8f2f\uff0c\u5982\u6b64\u53ef\u4ee5\u78ba\u5b9a\u4f7f\u7528\u8005\u80fd\u8a2a\u554f\u9019\u500b\u9801\u9762\u3002<\/p>\n

afterUpdate<\/h3>\n

\u9019\u662f\u5143\u4ef6\u66f4\u65b0\u5f8c\u7684\u4e8b\u4ef6\uff0c\u900f\u904e\u9019\u4e8b\u4ef6\u53ef\u4ee5\u4f86\u8a2d\u5b9a\u8cc7\u6599\u9762\u7684\u90e8\u4efd\u3002<\/p>\n

onDestroy<\/h3>\n

\u6700\u5f8c\u7576\u96e2\u958b\u9019\u5143\u4ef6\u6642\u90fd\u6703\u547c\u53eb\u9019\u500b\u4e8b\u4ef6\uff0c\u6240\u4ee5\u53ef\u4ee5\u5728\u9019\u88e1\u505a\u4e00\u4e9b\u91cb\u653e\u8a3b\u518a\u7684\u52d5\u4f5c\u3002<\/p>\n

svelte component lifecycle \u8a72\u600e\u9ebc\u7528\u5462<\/h2>\n

\u4ecb\u7d39\u5b8c\u5e38\u7528\u7684\u4e8b\u4ef6\u5f8c\uff0c\u63a5\u4e0b\u4f86\u5c31\u8aaa\u660e\u4e00\u4e0b\u8a72\u600e\u9ebc\u4f7f\u7528\uff0c\u6211\u5011\u5c31\u62ff onMount<\/code> \u8981\u8f09\u5165\u8cc7\u6599\u70ba\u4f8b\u5b50\uff0c\u8acb\u5927\u5bb6\u5148\u770b\u4e00\u4e0b\u4e0b\u9762\u7684\u7a0b\u5f0f\u78bc\u3002<\/p>\n

<script>\n    let photos = [];\n<\/script>\n\n<style>\n    .photos {\n        width: 100%;\n        display: grid;\n        grid-template-columns: repeat(5, 1fr);\n        grid-gap: 8px;\n    }\n\n    figure, img {\n        width: 100%;\n        margin: 0;\n    }\n<\/style>\n\n<h1>Photo album<\/h1>\n\n<div class="photos">\n    {#each photos as photo}\n        <figure>\n            <img src={photo.thumbnailUrl} alt={photo.title}>\n            <figcaption>{photo.title}<\/figcaption>\n        <\/figure>\n    {:else}\n        <!-- this block renders when photos.length === 0 -->\n        <p>loading...<\/p>\n    {\/each}\n<\/div><\/code><\/pre>\n
\u9019\u662f\u4e00\u500b\u986f\u793a\u5716\u7247\u7684\u57fa\u790e\u6846\u67b6\uff0c\u5927\u5bb6\u53ef\u4ee5\u5230svelte tutorial onmount<\/a>\u5be6\u969b\u64cd\u4f5c\u4e00\u4e0b\uff0c\u4f46\u662f\u9019\u4f8b\u5b50\u9084\u6c92\u5beb\u5b8c\uff0c\u56e0\u70ba\u6c92\u6709\u5730\u65b9\u53d6\u7684\u7167\u7247\u8cc7\u6599\uff0c\u6240\u4ee5\u9019\u908a\u6211\u5011\u8981\u53bb\u547c\u53ebAPI\u53d6\u5f97\u7167\u7247\u76f8\u95dc\u8cc7\u8a0a\uff0c\u6240\u4ee5\u6211\u5011\u4fee\u6539\u4e00\u4e0b\u4f8b\u5b50\uff0c\u8acb\u5927\u5bb6\u770b\u770b\u4fee\u6539\u5f8c\u7684\u7d50\u679c\u3002<\/p>\n
<script>\n    import { onMount } from 'svelte';\n\n    let photos = [];\n\n    onMount(async () => {\n        const res = await fetch(`https:\/\/jsonplaceholder.typicode.com\/photos?_limit=20`);\n        photos = await res.json();\n    });\n<\/script>\n\n<style>\n    .photos {\n        width: 100%;\n        display: grid;\n        grid-template-columns: repeat(5, 1fr);\n        grid-gap: 8px;\n    }\n\n    figure, img {\n        width: 100%;\n        margin: 0;\n    }\n<\/style>\n\n<h1>Photo album<\/h1>\n\n<div class="photos">\n    {#each photos as photo}\n        <figure>\n            <img src={photo.thumbnailUrl} alt={photo.title}>\n            <figcaption>{photo.title}<\/figcaption>\n        <\/figure>\n    {:else}\n        <!-- this block renders when photos.length === 0 -->\n        <p>loading...<\/p>\n    {\/each}\n<\/div><\/code><\/pre>\n
\u9019\u908a\u8981\u6ce8\u610f\u7684\u7b2c\u4e00\u4ef6\u4e8b\u60c5\u662f\uff0c\u4f7f\u7528lifecycle\u6642\u8981\u5148\u5f9esvelte import\u9032\u4f86\uff0c\u9019\u662f\u6211\u5011\u7b2c\u4e00\u6b21import\uff0c\u4e4b\u5f8c\u9032\u968e\u7684\u5167\u5bb9\u6703\u5e38\u5e38\u7528\u5230\uff0c\u518d\u4f86\u9019\u908a\u4e5f\u53ef\u4ee5\u642d\u914dawait\u505a\u4e00\u500bloading\u7684\u986f\u793a\uff0c\u5c31\u7559\u7d66\u8b80\u8005\u5011\u8a66\u8a66\u770b\u4e86\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u4ecb\u7d39\u7d66\u5927\u5bb6 svelte component lifecycle \u7684\u7a2e\u985e\u4ee5\u53ca\u7528\u6cd5\uff0c\u4e5f\u4f5c\u70ba\u9032\u968e\u5167\u5bb9\u7684\u7b2c\u4e00\u7bc7\uff0c\u5e0c\u671b\u5927\u5bb6\u6703\u559c\u6b61\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
svelte component lifecycle svelte component lifecycle \u662f … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY17- \u5143\u4ef6\u7684\u751f\u547d\u9031\u671f\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1345","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1345"}],"version-history":[{"count":10,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1345\/revisions"}],"predecessor-version":[{"id":3006,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1345\/revisions\/3006"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}