Tue May 28 14:30:00 CST 2024 inscode

src/components/HelloWorld.vue

@@ -8,18 +8,31 @@ defineProps({
 </script>
 
 <template>
-  <div class="greetings">
+  <div class="greetings title-wrap">
+    <img src="../assets/cat1.svg" width="55" height="90"  alt="">
+    <img src="../assets/cat2.svg" width="55" height="90"  alt="">
+    <img src="../assets/cat3.svg" width="55" height="90"  alt="">
     <h1 class="green">{{ msg }}</h1>
+    <img src="../assets/cat4.svg" width="55" height="90"  alt="">
+    <img src="../assets/cat5.svg" width="55" height="90"  alt="">
+    <img src="../assets/cat6.svg" width="55" height="90"  alt="">
   </div>
 </template>
 
 <style scoped>
 h1 {
   font-weight: 500;
-  font-size: 3rem;
-  top: -10px;
-  text-align: center;
+  font-size: 3.2rem;
   text-shadow: 5px 5px 4px #666;
   letter-spacing: 6px;
+  margin: 0 10px;
+
+}
+.title-wrap {
+  display: flex;
+  justify-content: center;
+}
+img {
+  margin: 0 5px;
 }
 </style>

src/components/TheWelcome.vue

@@ -19,6 +19,66 @@ const test1 = () => {
 
     log1.value.push('代码执行结束')
 }
+
+let log2 = ref([]);
+const test2 = () => {
+    log2.value = []
+    log2.value.push('1');
+setTimeout(function() {
+    log2.value.push('2');
+    process.nextTick(function() {
+        log2.value.push('3');
+   })
+    new Promise(function(resolve) {
+        log2.value.push('4');
+        resolve();
+    }).then(function() {
+        log2.value.push('5')
+    })
+})
+process.nextTick(function() {
+    log2.value.push('6');
+})
+new Promise(function(resolve) {
+    log2.value.push('7');
+    resolve();
+}).then(function() {
+    log2.value.push('8')
+})
+
+setTimeout(function() {
+    log2.value.push('9');
+    process.nextTick(function() {
+        log2.value.push('10');
+    })
+    new Promise(function(resolve) {
+        log2.value.push('11');
+        resolve();
+    }).then(function() {
+        log2.value.push('12')
+    })
+})
+}
+
+let log3 = ref([]);
+const test3 = () => {
+    log3.value = []
+    log3.value.push('script start');
+
+setTimeout(function () {
+    log3.value.push('setTimeout');
+}, 0);
+
+Promise.resolve()
+  .then(function () {
+    log3.value.push('promise1');
+  })
+  .then(function () {
+    log3.value.push('promise2');
+  });
+
+  log3.value.push('script end');
+}
 </script>
 
 <template>
@@ -220,21 +280,35 @@ setTimeout(() => {
     <li>micro-task(微任务)：Promise，process.nextTick</li>
 </ul>
 <p>不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。</p>
-<p>事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用文章最开始的一段代码说明：</p>
+<p>事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用一段代码说明：</p>
 <pre class="code">
-setTimeout(function() {
-    console.log('setTimeout');
-})
+console.log('script start');
 
-new Promise(function(resolve) {
-    console.log('promise');
-}).then(function() {
-    console.log('then');
-})
+setTimeout(function () {
+  console.log('setTimeout');
+}, 0);
+
+Promise.resolve()
+  .then(function () {
+    console.log('promise1');
+  })
+  .then(function () {
+    console.log('promise2');
+  });
 
-console.log('console');
+console.log('script end');
 
 </pre>
+<br>
+  <p>实际验证下：
+        <button class="default-btn" @click="log3 = []">重置 </button> 
+        <button class="ml-5" @click="test3">执行 </button>
+        <i class="fs-12 ml-5">请狠狠点击执行</i></p>
+    <p>结果：</p>
+    <div class="code" v-if="log3.length">
+        <p v-for="(item, index) of log3" :key="index">{{ item }}</p>
+    </div>
+    <br>
   <ul>
     <li>这段代码作为宏任务，进入主线程。</li>
     <li>先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)</li>
@@ -292,6 +366,15 @@ setTimeout(function() {
 
   </pre>
   <br>
+  <p>实际验证下：
+        <button class="default-btn" @click="log2 = []">重置 </button> 
+        <button class="ml-5" @click="test2">执行 </button>
+        <i class="fs-12 ml-5">请狠狠点击执行</i></p>
+    <p>结果：</p>
+    <div class="code" v-if="log2.length">
+        <p v-for="(item, index) of log2" :key="index">{{ item }}</p>
+    </div>
+    <br>
   <p>第一轮事件循环流程分析如下：</p>
   <ul>
     <li>整体script作为第一个宏任务进入主线程，遇到console.log，输出1。</li>