{"id":438817,"date":"2021-04-18T01:58:38","date_gmt":"2021-04-17T17:58:38","guid":{"rendered":"http:\/\/4563.org\/?p=438817"},"modified":"2021-04-18T01:58:38","modified_gmt":"2021-04-17T17:58:38","slug":"svelte-%e7%9a%84%e5%bc%82%e6%ad%a5%e6%9b%b4%e6%96%b0%e5%ae%9e%e7%8e%b0%e5%8e%9f%e7%90%86","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=438817","title":{"rendered":"Svelte \u7684\u5f02\u6b65\u66f4\u65b0\u5b9e\u73b0\u539f\u7406"},"content":{"rendered":"
\n
\n
\n

Svelte \u7684\u5f02\u6b65\u66f4\u65b0\u5b9e\u73b0\u539f\u7406 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : djyde <\/span> <\/i> 0<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
\n

\u539f\u8f7d\u4e8e\u6211\u7684\u72ec\u7acb\u535a\u5ba2\uff1a https:\/\/lutaonan.com<\/p>\n<\/blockquote>\n

\u5728 \u6211\u5bf9 Svelte \u7684\u770b\u6cd5 \u4e00\u6587\u91cc\uff0c\u6211\u5206\u6790\u4e86 Svelte \u5728\u7f16\u8bd1\u65f6\u5b9e\u73b0 Reactive \u7684\u539f\u7406\u3002\u5728\u8fd9\u7bc7\u6587\u7ae0\uff0c\u6211\u5c06\u5206\u6790\u5728 Svelte \u91cc\u66f4\u65b0\u4e00\u4e2a\u72b6\u6001 (state) \u503c\u540e\u66f4\u65b0\u5230 UI \u7684\u8fd9\u4e00\u8fc7\u7a0b\u3002<\/p>\n

\u9605\u8bfb\u672c\u6587\u524d\uff0c\u4f60\u5e94\u8be5\u81f3\u5c11\uff1a<\/p>\n

    \n
  • \u8bfb\u8fc7 \u6211\u5bf9 Svelte \u7684\u770b\u6cd5 <\/li>\n
  • \u660e\u767d JavaScript \u4e2d\u7684 \u4e8b\u4ef6\u5faa\u73af \u673a\u5236<\/li>\n<\/ul>\n

    \u539f\u7406\u5206\u6790<\/h2>\n

    \u4e3a\u4e86\u4fdd\u6301\u7b80\u5355\uff0c\u5148\u4ece\u4e00\u4e2a\u548c Svelte \u65e0\u5173\u7684\u4f8b\u5b50\u8bb2\u8d77\uff1a<\/p>\n

    \/\/ \u5047\u8bbe\u6211\u4eec\u6b63\u5728\u5b9e\u73b0\u4e00\u4e2a counter, \u53ea\u6709\u4e00\u4e2a state\uff0c\u5c31\u662f count, \u5b83\u662f\u4e00\u4e2a number: let count = 0  \/\/ \u6211\u4eec\u53ef\u4ee5\u5b9e\u73b0\u4e00\u4e2a setCount, \u6765\u6539\u53d8 count \u7684\u503c\uff0c\u987a\u4fbf\u6267\u884c\u66f4\u65b0 UI: function setCount(newVal) {   count = newVal   updateUI() }  function updateUI() {   console.log(\"update ui with count:\", count) }  setCount(1) \/\/=> update ui with count: 1 setCount(2) \/\/=> update ui with count: 2 setCount(3) \/\/=> update ui with count: 3 <\/code><\/pre>\n
    \u8fd9\u6837\u5b9e\u73b0\u5f88\u7b80\u5355\uff0c\u4f46\u662f\u6709\u4e00\u4e2a\u4e25\u91cd\u7684\u95ee\u9898\uff1a\u8fde\u7eed\u7684\u72b6\u6001\u66f4\u65b0\u4f1a\u8fde\u7eed\u89e6\u53d1 updateUI<\/code>, \u6027\u80fd\u4f1a\u975e\u5e38\u7cdf\u7cd5\u3002\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u7684\u65b9\u6cd5\u662f\uff1a\u628a\u540c\u4e00\u4e2a\u4e8b\u4ef6\u5faa\u73af\u91cc\u7684\u6240\u6709\u72b6\u6001\u66f4\u65b0\u9020\u6210\u7684 UI \u66f4\u65b0\u7edf\u4e00\u5408\u5e76\uff08 batch \uff09\u5230\u4e0b\u4e00\u4e2a\u4e8b\u4ef6\u5faa\u73af\u91cc\u7edf\u4e00\u6267\u884c\u3002\u505a\u6cd5\u5f88\u7b80\u5355\uff1a\u628a updateUI<\/code> \u653e\u5230\u4e00\u4e2a microtask \u91cc\u5c31\u884c\u3002<\/strong><\/p>\n
    \/\/ \u57fa\u4e8e Promise \u5b9e\u73b0\u4e00\u4e2a\u628a\u51fd\u6570\u653e\u5230 microtask \u91cc\u7684\u51fd\u6570 function createMicroTask(fn) {   Promise.resovle().then(fn); }  let updateScheduled = false; function scheduleUpdate() {   if (!updateScheduled) {     \/\/ \u5f53\u9996\u6b21 schedule \u65f6\uff0c\u628a updateUI \u653e\u5230 microtask \u4e2d     createMicroTask(updateUI)     updateScheduled = true;   } }  function updateUI() {   updateScheduled = false   console.log(\"update ui with count:\", count) }  \/\/ \u5728 setCount \u65f6\uff0c\u4e0d\u518d\u76f4\u63a5\u89e6\u53d1 updateUI, \u800c\u662f schedule \u4e00\u4e2a update function setCount(newVal) {   count = newVal  scheduleUpdate() }  setCount(1) setCount(2) setCount(3) \/\/=> update ui with count: 3 <\/code><\/pre>\n
    \u8fd9\u6837\uff0c\u5728\u540c\u4e00\u4e2a\u4e8b\u4ef6\u5faa\u73af\u91cc\uff0c\u591a\u4e2a\u72b6\u6001\u66f4\u65b0\u53ea\u4f1a\u89e6\u53d1\u4e00\u6b21 UI \u66f4\u65b0\u3002<\/p>\n
    \u73b0\u5728\u5047\u8bbe\u9875\u9762\u4e0a\u6709\u4e00\u4e2a h1<\/code>, updateUI<\/code> \u4e2d\u4f1a\u66f4\u65b0\u5b83\uff1a<\/p>\n
    let count = 0 const h1 = document.querySelector('h1')  function updateUI() {   updateScheduled = false  h1.innerHTML = `${count}` }  setCount(1) setCount(2) setCount(3) \/\/=> update ui with count: 3  <\/code><\/pre>\n
    So far so good. \u4f46\u662f\u76f8\u4fe1\u4e0d\u5c11\u4eba\u5e74\u8f7b\u7684\u65f6\u5019\u66fe\u7ecf\u5199\u8fc7\u8fd9\u6837\u7684\u4ee3\u7801\uff1a<\/p>\n
    setCount(1) setCount(2) setCount(3) console.log(h1.innerHTML) \/\/=> 0 <\/code><\/pre>\n
    \u5728 setCount(3)<\/code> \u540e\uff0c h1.innerHTML<\/code> \u7adf\u4e0d\u662f\u9884\u671f\u4e2d\u7684 3. \u4ed4\u7ec6\u4e00\u60f3\uff0c\u5f53\u7136\u4e86\uff0cupdateUI<\/code> \u662f\u5728\u4e0b\u4e00\u4e2a\u4e8b\u4ef6\u5faa\u73af\u624d\u89e6\u53d1\u7684\u554a\u3002<\/p>\n
    \u4e3a\u4e86\u53ef\u4ee5\u5728 setCount<\/code> \u540e\u62ff\u5230\u66f4\u65b0\u540e\u6b63\u786e\u7684\u503c\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u5173\u4e8e UI \u7684\u64cd\u4f5c\u4e5f\u653e\u5230\u4e0b\u4e00\u4e2a\u4e8b\u4ef6\u5faa\u73af\u624d\u6267\u884c\u3002\u4e3a\u4e86\u65b9\u4fbf\uff0c\u6211\u4eec\u53ef\u4ee5\u5199\u4e00\u4e2a tick<\/code> \u51fd\u6570\uff1a<\/p>\n
    function tick() {   return new Promise.resolve() }  async () => {   setCount(1)   setCount(2)   setCount(3)   await tick()   console.log(h1.innerHTML) \/\/=> 3 } <\/code><\/pre>\n
    Svelte \u7684\u5b9e\u9645\u505a\u6cd5<\/h2>\n
    \u56de\u5230 Svelte:<\/p>\n
    <script>     let count = 0 <\/script>  <div>     <span>{count}<\/span>     <button on:click={() => count++}>+<\/button>     <button on:click={() => count--}>-<\/button> <\/div> <\/code><\/pre>\n
    \u8fd9\u4e2a\u7ec4\u4ef6\u4f1a\u88ab\u7f16\u8bd1\u6210\u4e00\u4e2a fragment \uff08\u4f60\u4e0d\u9700\u8981\u8bfb\u61c2\u4e0b\u9762\u7684\u4ee3\u7801\uff09:<\/p>\n
    function create_fragment(ctx) {  let div;  let span;  let t0;  let t1;  let button0;  let t3;  let button1;  let mounted;  let dispose;   return {   c() {    div = element(\"div\");    span = element(\"span\");    t0 = text(\/*count*\/ ctx[0]);    t1 = space();    button0 = element(\"button\");    button0.textContent = \"+\";    t3 = space();    button1 = element(\"button\");    button1.textContent = \"-\";   },   m(target, anchor) {    insert(target, div, anchor);    append(div, span);    append(span, t0);    append(div, t1);    append(div, button0);    append(div, t3);    append(div, button1);     if (!mounted) {     dispose = [      listen(button0, \"click\", \/*click_handler*\/ ctx[1]),      listen(button1, \"click\", \/*click_handler_1*\/ ctx[2])     ];      mounted = true;    }   },   p(ctx, [dirty]) {    if (dirty & \/*count*\/ 1) set_data(t0, \/*count*\/ ctx[0]);   },   i: noop,   o: noop,   d(detaching) {    if (detaching) detach(div);    mounted = false;    run_all(dispose);   }  }; }  function instance($$self, $$props, $$invalidate) {  let count = 0;  const click_handler = () => $$invalidate(0, count++, count);  const click_handler_1 = () => $$invalidate(0, count--, count);  return [count, click_handler, click_handler_1]; }  <\/code><\/pre>\n
    \u4e0d\u8981\u611f\u5230\u5bb3\u6015\uff0c\u4e00\u4e2a Svelte Fragment \u5b9e\u9645\u4e0a\u662f\u4e00\u4e2a\u51fd\u6570\u8fd4\u56de\u51e0\u4e2a\u5fc5\u8981\u7684\u65b9\u6cd5\uff1a<\/p>\n
    function createFragment(ctx) {   return {     \/\/ \u521b\u5efa DOM \u7684\u65b9\u6cd5     c(): {},     \/\/ \u628a DOM mount \u5230\u8282\u70b9\u7684\u65b9\u6cd5\uff0c\u4ee5\u53ca\u4e8b\u4ef6\u7ed1\u5b9a     m(): {},     \/\/ DOM \u8282\u70b9\u66f4\u65b0\u7684\u65b9\u6cd5     p(): {},   \/\/ unmount \u7684\u65b9\u6cd5     d() {}   } } <\/code><\/pre>\n
    \u8fd9\u91cc\u7684 p()<\/code>, \u5c31\u662f\u7c7b\u4f3c\u4e0a\u6587\u63d0\u5230\u7684 updateUI<\/code>.<\/p>\n
    \u800c instance<\/code> \u5219\u662f <script><\/code> \u4e4b\u4e2d\u5b9a\u4e49\u7684\u53d8\u91cf\u548c\u4e00\u4e9b event handlers. $$invalidate(0, count--, count)<\/code> \u7c7b\u4f3c\u4e0a\u6587\u63d0\u5230\u7684 setCount<\/code>. \u5728\u771f\u5b9e\u7684 Svelte \u4e2d\u6574\u4e2a\u72b6\u6001\u66f4\u65b0\u7684\u6d41\u7a0b\u7b80\u5355\u5730\u6765\u8bf4\u5c31\u662f\uff1a<\/p>\n
      \n
    1. \u7528\u6237\u70b9\u51fb button, \u89e6\u53d1 $$invalidate(0, count--, count)<\/code><\/li>\n
    2. \u89e6\u53d1 schedule_update()<\/code>, \u901a\u77e5\u6846\u67b6\u8fd9\u4e2a fragment \u9700\u8981\u88ab\u66f4\u65b0\uff08make_dirty()<\/code>\uff09\uff0c\u6846\u67b6\u4f1a\u7ef4\u62a4\u4e00\u4e2a dirty_components<\/code> \u7684\u6570\u7ec4<\/li>\n
    3. \u4e8b\u4ef6\u5faa\u73af\u7ed3\u675f\u540e\uff0c\u89e6\u53d1\u66f4\u65b0\uff08flush<\/code>\uff09\uff0c\u904d\u5386 dirty_components<\/code>, \u89e6\u53d1\u6bcf\u4e00\u4e2a component \u7684 p()<\/code><\/li>\n<\/ol><\/div>\n
       \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (4<\/span>)        <\/div>\n
       <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
        \n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : Wichna <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u8d5e                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : djyde <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u6ce8\uff1a\u6587\u4e2d\u5bf9\u4e8b\u4ef6\u5faa\u73af\u7684\u8868\u8fbe\u6709\u8bef\uff0c\u5728\u535a\u5ba2\u4e2d\u5df2\u4fee\u6539\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : FightPig <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u6211\u53d1\u73b0 vue3 \u7684 setup \u65b0\u63d0\u6848 ref \u5199\u6cd5\u6709\u70b9\u50cf Svelte \u4e86\uff0c                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : phithon <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u6587\u7ae0\u4e0d\u9519                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n","protected":false},"excerpt":{"rendered":"
        Svelte \u7684\u5f02\u6b65\u66f4\u65b0\u5b9e\u73b0\u539f\u7406 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/438817"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=438817"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/438817\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=438817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=438817"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=438817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}