|
1 | 1 | <template> |
2 | | - <v-event-loop-list :dataList="dataList"/> |
| 2 | + <v-event-loop-list :data-list="dataList"/> |
3 | 3 | </template> |
4 | 4 |
|
5 | 5 | <script lang="ts" setup> |
|
10 | 10 | id: number, |
11 | 11 | content: { |
12 | 12 | eventLoopData?: { |
13 | | - /*栈内容*/ |
| 13 | + /* 栈内容*/ |
14 | 14 | stack?: string[] |
15 | | - /*APIs内容*/ |
| 15 | + /* APIs内容*/ |
16 | 16 | apis?: { |
17 | 17 | time?: string, |
18 | 18 | info: string |
19 | 19 | }[] |
20 | | - /*event-loop图标旋转*/ |
| 20 | + /* event-loop图标旋转*/ |
21 | 21 | loop?: boolean |
22 | | - /*队列信息*/ |
| 22 | + /* 队列信息*/ |
23 | 23 | queue?: string[][] |
24 | | - /*控制台内容*/ |
| 24 | + /* 控制台内容*/ |
25 | 25 | console?: string[] |
26 | | - /*控制台标记*/ |
| 26 | + /* 控制台标记*/ |
27 | 27 | consoleIndex?: number |
28 | 28 | }, |
29 | 29 | desc?: string[] |
|
38 | 38 | loop: false |
39 | 39 | }, |
40 | 40 | desc: [ |
41 | | - `代码准备运行中,事件循环还未开始`, |
| 41 | + `代码准备运行中,事件循环还未开始` |
42 | 42 | ] |
43 | 43 | } |
44 | 44 | }, |
45 | 45 | { |
46 | 46 | id: 2, |
47 | 47 | content: { |
48 | 48 | eventLoopData: { |
49 | | - stack: [ '/images/what_is_event_loop_asyn_1.png' ], |
| 49 | + stack: [ '/what_is_event_loop_asyn_1.png' ] |
50 | 50 | }, |
51 | 51 | desc: [ |
52 | | - `开始运行,事件循环开始,先执行<img src="/images/what_is_event_loop_asyn_1.png" alt=""/>,这个任务被压入调用栈中` |
| 52 | + `开始运行,事件循环开始,先执行<img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_asyn_1.png" alt=""/>,这个任务被压入调用栈中` |
53 | 53 | ] |
54 | 54 | } |
55 | 55 | }, |
|
58 | 58 | content: { |
59 | 59 | eventLoopData: { |
60 | 60 | console: [ '开始' ], |
61 | | - consoleIndex: -1, |
| 61 | + consoleIndex: -1 |
62 | 62 | }, |
63 | 63 | desc: [ |
64 | 64 | '因为该任务是同步任务,立马被执行,执行完毕后被弹出,结果会被浏览器控制台打印', |
|
70 | 70 | id: 4, |
71 | 71 | content: { |
72 | 72 | eventLoopData: { |
73 | | - stack: [ '/images/what_is_event_loop_settimeout_1.png' ], |
74 | | - console: [ '开始' ], |
| 73 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png' ], |
| 74 | + console: [ '开始' ] |
75 | 75 | }, |
76 | 76 | desc: [ |
77 | | - `下一个 <img src="/images/what_is_event_loop_settimeout_1.png" alt="" /> 任务被压入调用栈中` |
| 77 | + `下一个 <img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png" alt="" /> 任务被压入调用栈中` |
78 | 78 | ] |
79 | 79 | } |
80 | 80 | }, |
81 | 81 | { |
82 | 82 | id: 5, |
83 | 83 | content: { |
84 | 84 | eventLoopData: { |
85 | | - stack: [ '/images/what_is_event_loop_settimeout_1.png' ], |
86 | | - apis: [ { time: '1000ms', info: '/images/what_is_event_loop_settimeout_1_func_1.png' } ], |
87 | | - console: [ '开始' ], |
| 85 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png' ], |
| 86 | + apis: [ { time: '1000ms', info: 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png' } ], |
| 87 | + console: [ '开始' ] |
88 | 88 | }, |
89 | 89 | desc: [ |
90 | | - '调用栈发现 <img src="/images/what_is_event_loop_settimeout_1.png" alt="" /> 这个任务是异步执行的操作(宏任务),' + |
91 | | - '会把该任务的子任务(方法)放到 <code>WebAPIs</code> 中,如果有执行时间会进入计时,计时完毕放到宏任务队列' |
| 90 | + '调用栈发现 <img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png" alt="" /> 这个任务是异步执行的操作(宏任务),' + |
| 91 | + '会把该任务的子任务(方法)放到 <code>WebAPIs</code> 中,如果有执行时间会进入计时,计时完毕放到宏任务队列' |
92 | 92 | ] |
93 | 93 | } |
94 | 94 | }, |
95 | 95 | { |
96 | 96 | id: 6, |
97 | 97 | content: { |
98 | 98 | eventLoopData: { |
99 | | - apis: [ { time: '1000ms', info: `/images/what_is_event_loop_settimeout_1.png` } ], |
100 | | - console: [ '开始' ], |
| 99 | + apis: [ { time: '1000ms', info: `https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png` } ], |
| 100 | + console: [ '开始' ] |
101 | 101 | }, |
102 | 102 | desc: [ |
103 | | - `<img src="/images/what_is_event_loop_settimeout_1.png" alt=""/> 内部子任务被放入后,它本身被调用栈弹出,调用栈空闲,事件循环也没有发现可执行的微任务` |
| 103 | + `<img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png" alt=""/> 内部子任务被放入后,它本身被调用栈弹出,调用栈空闲,事件循环也没有发现可执行的微任务` |
104 | 104 | ] |
105 | 105 | } |
106 | 106 | }, |
107 | 107 | { |
108 | 108 | id: 7, |
109 | 109 | content: { |
110 | 110 | eventLoopData: { |
111 | | - stack: ['/images/what_is_event_loop_asyn_2.png'], |
112 | | - apis: [ { time: '1000ms', info: `/images/what_is_event_loop_settimeout_1.png` } ], |
113 | | - console: [ '开始' ], |
| 111 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_asyn_2.png' ], |
| 112 | + apis: [ { time: '1000ms', info: `https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1.png` } ], |
| 113 | + console: [ '开始' ] |
114 | 114 | }, |
115 | 115 | desc: [ |
116 | | - `继续执行同步任务 <img src="/images/what_is_event_loop_asyn_2.png" alt="">,压入调用栈中` |
| 116 | + `继续执行同步任务 <img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_asyn_2.png" alt="">,压入调用栈中` |
117 | 117 | ] |
118 | 118 | } |
119 | 119 | }, |
120 | 120 | { |
121 | 121 | id: 8, |
122 | 122 | content: { |
123 | 123 | eventLoopData: { |
124 | | - apis: [ { time: '1000ms', info: `/images/what_is_event_loop_asyn_2.png` } ], |
| 124 | + apis: [ { time: '1000ms', info: `https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_asyn_2.png` } ], |
125 | 125 | console: [ '开始', '结束' ], |
126 | 126 | consoleIndex: -1 |
127 | 127 | }, |
|
134 | 134 | id: 9, |
135 | 135 | content: { |
136 | 136 | eventLoopData: { |
137 | | - queue: [, [`/images/what_is_event_loop_settimeout_1_func_1.png`]], |
138 | | - console: [ '开始', '结束' ], |
| 137 | + queue: [ , [ `https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png` ] ], |
| 138 | + console: [ '开始', '结束' ] |
139 | 139 | }, |
140 | 140 | desc: [ |
141 | 141 | `定时任务计时完毕,被丢入宏任务队列` |
|
146 | 146 | id: 10, |
147 | 147 | content: { |
148 | 148 | eventLoopData: { |
149 | | - stack: ['/images/what_is_event_loop_settimeout_1_func_1.png'], |
150 | | - console: [ '开始', '结束' ], |
| 149 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png' ], |
| 150 | + console: [ '开始', '结束' ] |
151 | 151 | }, |
152 | 152 | desc: [ |
153 | 153 | `事件循环发现队列中的宏任务,于是把这个任务放入调用栈中` |
|
158 | 158 | id: 11, |
159 | 159 | content: { |
160 | 160 | eventLoopData: { |
161 | | - stack: ['/images/what_is_event_loop_settimeout_1_func_1.png', '/images/what_is_event_loop_settimeout_1_func_1_asyn_1.png'], |
162 | | - console: [ '开始', '结束' ], |
| 161 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png', 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1_asyn_1.png' ], |
| 162 | + console: [ '开始', '结束' ] |
163 | 163 | }, |
164 | 164 | desc: [ |
165 | 165 | `因为这是个方法,所以其中的内容被提取,依次放在调用栈的堆上` |
|
170 | 170 | id: 12, |
171 | 171 | content: { |
172 | 172 | eventLoopData: { |
173 | | - stack: ['/images/what_is_event_loop_settimeout_1_func_1.png'], |
| 173 | + stack: [ 'https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png' ], |
174 | 174 | console: [ '开始', '结束', '定时' ], |
175 | 175 | consoleIndex: -1 |
176 | 176 | }, |
177 | 177 | desc: [ |
178 | | - `<img src="/images/what_is_event_loop_settimeout_1_func_1_asyn_1.png" alt=""/>被执行,在浏览器控制台上打印,随后被抛出调用栈` |
| 178 | + `<img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1_asyn_1.png" alt=""/>被执行,在浏览器控制台上打印,随后被抛出调用栈` |
179 | 179 | ] |
180 | 180 | } |
181 | 181 | }, |
182 | 182 | { |
183 | 183 | id: 13, |
184 | 184 | content: { |
185 | 185 | eventLoopData: { |
186 | | - console: [ '开始', '结束', '定时' ], |
| 186 | + console: [ '开始', '结束', '定时' ] |
187 | 187 | }, |
188 | 188 | desc: [ |
189 | | - `因为 <img src="/images/what_is_event_loop_settimeout_1_func_1.png" alt=""/> 里的任务都被执行,所以它被抛出了调用栈` |
| 189 | + `因为 <img src="https://namichong.obs.cn-south-1.myhuaweicloud.com/Blog/images/what_is_event_loop_settimeout_1_func_1.png" alt=""/> 里的任务都被执行,所以它被抛出了调用栈` |
190 | 190 | ] |
191 | 191 | } |
192 | 192 | }, |
|
0 commit comments