vue3_hook_timing.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1713px" height="3576px" viewBox="-0.5 -0.5 1713 3576" content="&lt;mxfile host=&quot;devops-wiki.ssfshop.com&quot; modified=&quot;2021-12-17T07:14:07.002Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15&quot; etag=&quot;WHS8RMXey00v1fkY0qU1&quot; version=&quot;14.1.3&quot; type=&quot;atlas&quot;&gt;&lt;mxAtlasLibraries/&gt;&lt;diagram id=&quot;rAEQOpxbkxuYJ3fq2zDt&quot; name=&quot;페이지-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="550" y="55" width="170" height="3500" rx="25.5" ry="25.5" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 62px; margin-left: 551px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">transition</div></div></div></foreignObject><text x="635" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">transition</text></switch></g><rect x="900" y="65" width="160" height="3510" rx="24" ry="24" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 72px; margin-left: 901px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">component 1</div></div></div></foreignObject><text x="980" y="86" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">component 1</text></switch></g><rect x="1540" y="55" width="160" height="3510" rx="24" ry="24" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 62px; margin-left: 1541px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">component 3</div></div></div></foreignObject><text x="1620" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">component 3</text></switch></g><rect x="1400" y="55" width="130" height="3510" rx="19.5" ry="19.5" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 62px; margin-left: 1401px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">route config 3</div></div></div></foreignObject><text x="1465" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">route config 3</text></switch></g><rect x="1220" y="55" width="160" height="3510" rx="24" ry="24" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 62px; margin-left: 1221px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">component 2</div></div></div></foreignObject><text x="1300" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">component 2</text></switch></g><rect x="1080" y="50" width="130" height="3510" rx="19.5" ry="19.5" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 57px; margin-left: 1081px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">route config 2</div></div></div></foreignObject><text x="1145" y="71" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">route config 2</text></switch></g><rect x="750" y="55" width="130" height="3510" rx="19.5" ry="19.5" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 62px; margin-left: 751px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">route config 1</div></div></div></foreignObject><text x="815" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">route config 1</text></switch></g><rect x="340" y="55" width="190" height="3500" rx="28.5" ry="28.5" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 62px; margin-left: 341px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">router</div></div></div></foreignObject><text x="435" y="76" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">router</text></switch></g><rect x="915" y="365" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 385px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">setup</div></div></div></foreignObject><text x="980" y="389" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">setup</text></switch></g><path d="M 500 155 L 815 155 L 815 178.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 815 183.88 L 811.5 176.88 L 815 178.63 L 818.5 176.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="135" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 155px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEach</div></div></div></foreignObject><text x="435" y="159" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEach</text></switch></g><rect x="370" y="245" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 265px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeResolved</div></div></div></foreignObject><text x="435" y="269" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeResolved</text></switch></g><path d="M 500 315 L 980 315 L 980 358.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 363.88 L 976.5 356.88 L 980 358.63 L 983.5 356.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="295" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 315px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEach</div></div></div></foreignObject><text x="435" y="319" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEach</text></switch></g><rect x="1235" y="2185" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2205px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeUpdate</div></div></div></foreignObject><text x="1300" y="2209" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeUpdate</text></switch></g><rect x="1235" y="2235" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2255px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">updated</div></div></div></foreignObject><text x="1300" y="2259" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">updated</text></switch></g><path d="M 915 445 L 635 445 L 635 468.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 473.88 L 631.5 466.88 L 635 468.63 L 638.5 466.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="425" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 445px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeMount</div></div></div></foreignObject><text x="980" y="449" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeMount</text></switch></g><rect x="915" y="595" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 615px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">mounted</div></div></div></foreignObject><text x="980" y="619" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">mounted</text></switch></g><path d="M 760 205 L 435 205 L 435 238.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 243.88 L 431.5 236.88 L 435 238.63 L 438.5 236.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="760" y="185" width="110" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 205px; margin-left: 761px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="815" y="209" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><rect x="570" y="475" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 495px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="635" y="499" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><path d="M 700 545 L 980 545 L 980 588.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 593.88 L 976.5 586.88 L 980 588.63 L 983.5 586.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="525" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 545px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">enter</div></div></div></foreignObject><text x="635" y="549" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">enter</text></switch></g><path d="M 915 675 L 635 675 L 635 708.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 713.88 L 631.5 706.88 L 635 708.63 L 638.5 706.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="655" width="130" height="40" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 675px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Keep-Alive<br />activated</div></div></div></foreignObject><text x="980" y="679" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">Keep-Alive...</text></switch></g><rect x="915" y="865" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 885px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">renderTracked</div></div></div></foreignObject><text x="980" y="889" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">renderTracked</text></switch></g><path d="M 947.5 965 L 947.5 970 Q 947.5 975 937.5 975 L 860 975 Q 850 975 850 965 L 850 755 Q 850 745 860 745 L 937.5 745 Q 947.5 745 947.5 751.82 L 947.5 758.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 947.5 763.88 L 944 756.88 L 947.5 758.63 L 951 756.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="925" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 945px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">renderTriggered</div></div></div></foreignObject><text x="980" y="949" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">renderTriggered</text></switch></g><path d="M 915 1025 L 445 1025 Q 435 1025 435 1035 L 435 1048.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 1053.88 L 431.5 1046.88 L 435 1048.63 L 438.5 1046.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="1005" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1025px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeRouteLeave</div></div></div></foreignObject><text x="980" y="1029" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeRouteLeave</text></switch></g><path d="M 500 1075 L 1135 1075 Q 1145 1075 1145 1085 L 1145 1108.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1145 1113.88 L 1141.5 1106.88 L 1145 1108.63 L 1148.5 1106.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="1055" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1075px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEach</div></div></div></foreignObject><text x="435" y="1079" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEach</text></switch></g><path d="M 1095 1135 L 445 1135 Q 435 1135 435 1145 L 435 1158.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 1163.88 L 431.5 1156.88 L 435 1158.63 L 438.5 1156.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1095" y="1115" width="100" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 1135px; margin-left: 1096px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="1145" y="1139" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><rect x="370" y="1165" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1185px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeResolved</div></div></div></foreignObject><text x="435" y="1189" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeResolved</text></switch></g><path d="M 500 1235 L 625 1235 Q 635 1235 635 1241.82 L 635 1248.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 1253.88 L 631.5 1246.88 L 635 1248.63 L 638.5 1246.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="1215" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1235px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEach</div></div></div></foreignObject><text x="435" y="1239" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEach</text></switch></g><path d="M 700 735 L 980 735 L 980 758.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 763.88 L 976.5 756.88 L 980 758.63 L 983.5 756.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="715" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 735px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEnter</div></div></div></foreignObject><text x="635" y="739" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEnter</text></switch></g><rect x="570" y="1255" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1275px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeLeave</div></div></div></foreignObject><text x="635" y="1279" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeLeave</text></switch></g><path d="M 700 1325 L 970 1325 Q 980 1325 980 1331.82 L 980 1338.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 1343.88 L 976.5 1336.88 L 980 1338.63 L 983.5 1336.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="1305" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1325px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">leave</div></div></div></foreignObject><text x="635" y="1329" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">leave</text></switch></g><rect x="570" y="1550" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1570px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterLeave</div></div></div></foreignObject><text x="635" y="1574" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterLeave</text></switch></g><path d="M 1045 1365 L 1290 1365 Q 1300 1365 1300 1371.82 L 1300 1378.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1300 1383.88 L 1296.5 1376.88 L 1300 1378.63 L 1303.5 1376.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="1345" width="130" height="40" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1365px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Keep-Alive<br />deactivated</div></div></div></foreignObject><text x="980" y="1369" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">Keep-Alive...</text></switch></g><rect x="1235" y="1385" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1405px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">setup</div></div></div></foreignObject><text x="1300" y="1409" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">setup</text></switch></g><path d="M 1235 1465 L 645 1465 Q 635 1465 635 1475 L 635 1493.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 1498.88 L 631.5 1491.88 L 635 1493.63 L 638.5 1491.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1235" y="1445" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1465px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeMount</div></div></div></foreignObject><text x="1300" y="1469" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeMount</text></switch></g><rect x="570" y="1500" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1520px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="635" y="1524" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><path d="M 428.14 1586.16 C 402.5 1576.15 400 1559.66 422.42 1548.42 C 444.84 1537.17 484.53 1535 513.27 1543.46 C 542.02 1551.91 550 1568.09 531.55 1580.51 C 513.1 1592.92 474.51 1597.33 443.22 1590.59 C 436.18 1598.93 424.83 1604.23 412.38 1605 C 420.21 1600.41 425.79 1593.74 428.14 1586.16 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="15" transform="translate(475,0)scale(-1,1)translate(-475,0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 1570px; margin-left: 401px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">in-out<br />out-in에 따라 바뀜</div></div></div></foreignObject><text x="475" y="1574" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">in-out...</text></switch></g><path d="M 700 1620 L 1290 1620 Q 1300 1620 1300 1630 L 1300 1658.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1300 1663.88 L 1296.5 1656.88 L 1300 1658.63 L 1303.5 1656.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="1600" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1620px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">enter</div></div></div></foreignObject><text x="635" y="1624" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">enter</text></switch></g><rect x="1235" y="1665" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1685px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">mounted</div></div></div></foreignObject><text x="1300" y="1689" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">mounted</text></switch></g><path d="M 1235 1735 L 645 1735 Q 635 1735 635 1745 L 635 1778.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 1783.88 L 631.5 1776.88 L 635 1778.63 L 638.5 1776.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1235" y="1715" width="130" height="40" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1735px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Keep-Alive<br />activated</div></div></div></foreignObject><text x="1300" y="1739" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">Keep-Alive...</text></switch></g><rect x="570" y="1785" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1805px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEnter</div></div></div></foreignObject><text x="635" y="1809" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEnter</text></switch></g><path d="M 320 1925 L 320 1945 M 1710 1925 L 1710 1945 M 320 1935 L 1710 1935" fill="#ffffff" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/><path d="M 310 975 L 310 995 M 1710 975 L 1710 995 M 310 985 L 1710 985" fill="#ffffff" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/><path d="M 500 1985 L 1290 1985 Q 1300 1985 1300 1995 L 1300 2008.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1300 2013.88 L 1296.5 2006.88 L 1300 2008.63 L 1303.5 2006.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="1965" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 1985px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEach</div></div></div></foreignObject><text x="435" y="1989" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEach</text></switch></g><path d="M 1235 2035 L 445 2035 Q 435 2035 435 2045 L 435 2068.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 2073.88 L 431.5 2066.88 L 435 2068.63 L 438.5 2066.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1235" y="2015" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2035px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeRouteUpdate</div></div></div></foreignObject><text x="1300" y="2039" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeRouteUpdate</text></switch></g><rect x="370" y="2075" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2095px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeResolved</div></div></div></foreignObject><text x="435" y="2099" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeResolved</text></switch></g><path d="M 500 2145 L 1290 2145 Q 1300 2145 1300 2155 L 1300 2178.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1300 2183.88 L 1296.5 2176.88 L 1300 2178.63 L 1303.5 2176.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="2125" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2145px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEach</div></div></div></foreignObject><text x="435" y="2149" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEach</text></switch></g><path d="M 310 2295 L 310 2315 M 1710 2295 L 1710 2315 M 310 2305 L 1710 2305" fill="#ffffff" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/><path d="M 1235 2355 L 445 2355 Q 435 2355 435 2365 L 435 2398.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 2403.88 L 431.5 2396.88 L 435 2398.63 L 438.5 2396.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1235" y="2335" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2355px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeRouteLeave</div></div></div></foreignObject><text x="1300" y="2359" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeRouteLeave</text></switch></g><path d="M 500 2425 L 1455 2425 Q 1465 2425 1465 2435 L 1465 2448.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1465 2453.88 L 1461.5 2446.88 L 1465 2448.63 L 1468.5 2446.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="2405" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2425px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEach</div></div></div></foreignObject><text x="435" y="2429" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEach</text></switch></g><path d="M 1410 2475 L 445 2475 Q 435 2475 435 2485 L 435 2518.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 435 2523.88 L 431.5 2516.88 L 435 2518.63 L 438.5 2516.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1410" y="2455" width="110" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 2475px; margin-left: 1411px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="1465" y="2479" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><rect x="370" y="2525" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2545px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeResolved</div></div></div></foreignObject><text x="435" y="2549" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeResolved</text></switch></g><path d="M 500 2595 L 625 2595 Q 635 2595 635 2605 L 635 2628.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 2633.88 L 631.5 2626.88 L 635 2628.63 L 638.5 2626.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="370" y="2575" width="130" height="40" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2595px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEach</div></div></div></foreignObject><text x="435" y="2599" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEach</text></switch></g><rect x="570" y="2635" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2655px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeLeave</div></div></div></foreignObject><text x="635" y="2659" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeLeave</text></switch></g><path d="M 700 2705 L 1290 2705 Q 1300 2705 1300 2715 L 1300 2758.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1300 2763.88 L 1296.5 2756.88 L 1300 2758.63 L 1303.5 2756.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="2685" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2705px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">leave</div></div></div></foreignObject><text x="635" y="2709" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">leave</text></switch></g><rect x="110" y="1905" width="190" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 1935px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">router.push({params});<br />/path/:param changed<br /></div></div></div></foreignObject><text x="205" y="1939" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">router.push({params});...</text></switch></g><rect x="150" y="955" width="190" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 985px; margin-left: 151px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">router.push</div></div></div></foreignObject><text x="245" y="989" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">router.push</text></switch></g><rect x="120" y="2275" width="190" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 2305px; margin-left: 121px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">page 3로 이동<br />(keep-alive max 초과시)</div></div></div></foreignObject><text x="215" y="2309" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">page 3로 이동...</text></switch></g><path d="M 1235 2785 L 990 2785 Q 980 2785 980 2795 L 980 2818.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 2823.88 L 976.5 2816.88 L 980 2818.63 L 983.5 2816.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1235" y="2765" width="130" height="40" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2785px; margin-left: 1236px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Keep-Alive<br />deactivated</div></div></div></foreignObject><text x="1300" y="2789" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">Keep-Alive...</text></switch></g><path d="M 1045 2845 L 1610 2845 Q 1620 2845 1620 2855 L 1620 2898.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1620 2903.88 L 1616.5 2896.88 L 1620 2898.63 L 1623.5 2896.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="2825" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2845px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeUnmount</div></div></div></foreignObject><text x="980" y="2849" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeUnmount</text></switch></g><rect x="1555" y="2905" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2925px; margin-left: 1556px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">setup</div></div></div></foreignObject><text x="1620" y="2929" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">setup</text></switch></g><path d="M 1555 2985 L 645 2985 Q 635 2985 635 2995 L 635 3018.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 3023.88 L 631.5 3016.88 L 635 3018.63 L 638.5 3016.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1555" y="2965" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 2985px; margin-left: 1556px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeMount</div></div></div></foreignObject><text x="1620" y="2989" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeMount</text></switch></g><path d="M 700 3095 L 970 3095 Q 980 3095 980 3105 L 980 3138.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 980 3143.88 L 976.5 3136.88 L 980 3138.63 L 983.5 3136.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="3075" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3095px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterLeave</div></div></div></foreignObject><text x="635" y="3099" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterLeave</text></switch></g><rect x="570" y="3025" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3045px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeEnter</div></div></div></foreignObject><text x="635" y="3049" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeEnter</text></switch></g><path d="M 915 3165 L 645 3165 Q 635 3165 635 3175 L 635 3228.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 3233.88 L 631.5 3226.88 L 635 3228.63 L 638.5 3226.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="915" y="3145" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3165px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">unmounted</div></div></div></foreignObject><text x="980" y="3169" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">unmounted</text></switch></g><path d="M 700 3255 L 1605 3255 Q 1615 3255 1615 3265 L 1615 3288.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1615 3293.88 L 1611.5 3286.88 L 1615 3288.63 L 1618.5 3286.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="3235" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3255px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">enter</div></div></div></foreignObject><text x="635" y="3259" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">enter</text></switch></g><rect x="1550" y="3295" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3315px; margin-left: 1551px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">mounted</div></div></div></foreignObject><text x="1615" y="3319" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">mounted</text></switch></g><path d="M 1550 3375 L 645 3375 Q 635 3375 635 3385 L 635 3418.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 635 3423.88 L 631.5 3416.88 L 635 3418.63 L 638.5 3416.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="1550" y="3355" width="130" height="40" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3375px; margin-left: 1551px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Keep-Alive<br />activated</div></div></div></foreignObject><text x="1615" y="3379" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">Keep-Alive...</text></switch></g><rect x="570" y="3425" width="130" height="40" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 3445px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">afterEnter</div></div></div></foreignObject><text x="635" y="3449" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">afterEnter</text></switch></g><rect x="20" y="5" width="420" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 418px; height: 1px; padding-top: 15px; margin-left: 21px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 25px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Vue 3 + Vue Router Hook Timing</div></div></div></foreignObject><text x="230" y="23" fill="#000000" font-family="Helvetica" font-size="25px" text-anchor="middle" font-weight="bold">Vue 3 + Vue Router Hook Timing</text></switch></g><path d="M -1710 1791.67 L 1756 1791.67 L 1756 1765 L 1790 1805 L 1756 1845 L 1756 1818.33 L -1710 1818.33 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" transform="rotate(90,40,1805)" pointer-events="all"/><rect x="50" y="85" width="40" height="20" fill="none" stroke="none" transform="rotate(-90,70,95)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 70 95)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 95px; margin-left: 51px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 25px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Time</div></div></div></foreignObject><text x="70" y="103" fill="#000000" font-family="Helvetica" font-size="25px" text-anchor="middle">Time</text></switch></g><rect x="915" y="765" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 785px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">beforeUpdate</div></div></div></foreignObject><text x="980" y="789" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">beforeUpdate</text></switch></g><rect x="915" y="815" width="130" height="40" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 835px; margin-left: 916px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">updated</div></div></div></foreignObject><text x="980" y="839" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">updated</text></switch></g><rect x="790" y="855" width="80" height="20" fill="none" stroke="none" transform="rotate(-90,830,865)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 830 865)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 865px; margin-left: 791px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">dependency <br />changed</div></div></div></foreignObject><text x="830" y="869" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">dependency...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>