引入了新的狀態監控方法 before_destory 和 destroyed，用來監控應用在銷毀前及銷毀後的狀態變化。

pardnchiu · Nov 4, 2024 · 261713b · 261713b
1 parent 89ba7fc
commit 261713b
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 39 deletions.
diff --git a/dist/PDQuickUI.js b/dist/PDQuickUI.js
diff --git a/dist/PDQuickUI.module.js b/dist/PDQuickUI.module.js
diff --git a/index.html b/index.html
@@ -65,10 +65,14 @@
     </head>
 
     <body id="app" class="dom-temp">
-        <h1 :id="title" :if="heading == 1">{{ title }} 1</h1>
-        <h2 :else-if="isH2">{{ title }} 2</h2>
-        <h3 :else-if="heading == 3">{{ title }} 3</h3>
-        <h4 :else>{{ title }} 4</h4>
+        <h1 :id="title" :if="heading == 1">{{ title }} 1
+            {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</h1>
+        <h2 :else-if="isH2">{{ title }} 2
+            {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</h2>
+        <h3 :else-if="heading == 3">{{ title }} 3
+            {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</h3>
+        <h4 :else>{{ title }} 4
+            {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</h4>
         <br>
         <!-- <p :html="html" :bg-color="#000" :color="#ff0000">adfasdf</p> -->
         <!-- <input type="text" :model="title"> -->
@@ -78,22 +82,25 @@ <h4 :else>{{ title }} 4</h4>
         <ul>
             <li :for="(key, val) in obj" :@click="val.click">
                 {{ key }}: {{ val.name }}
+                {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
                 <ul>
                     <li :for="item in val.ary">
                         {{ item.name }}
+                        {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
                         <ul>
                             <li :for="(item1, index1) in item.ary1">
                                 {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
+                                {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
                             </li>
                         </ul>
                     </li>
                 </ul>
             </li>
         </ul>
-        <br>
-        {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
         <ul>
-            <li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ CALC(index + 1) }}</li>
+            <li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ CALC(index + 1) }}
+                {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</li>
+            {{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
         </ul>
         <img :lazyload="src" alt="">
         <p @click="click">Total: {{ LENGTH(array) }}</p>
@@ -175,30 +182,32 @@ <h4 :else>{{ title }} 4</h4>
                         console.log(app.data)
                     }
                 },
-                before_render: _ => {
-                    console.log("準備渲染")
-                    // return false;
-                },
-                rendered: _ => {
-                    // setTimeout(_ => {
+                lifecycle: {
+                    before_render: _ => {
+                        console.log("準備渲染")
+                        // return false;
+                    },
+                    rendered: _ => {
+                        // setTimeout(_ => {
 
-                    //     app.data.heading = 3
-                    // }, 1000)
-                    // setTimeout(_ => {
+                        //     app.data.heading = 3
+                        // }, 1000)
+                        // setTimeout(_ => {
 
-                    //     app.data.isH2 = true
-                    //     app.data.obj.home.ary[0].name = "Test"
+                        //     app.data.isH2 = true
+                        //     app.data.obj.home.ary[0].name = "Test"
 
-                    // }, 2000)
-                    console.log("已渲染")
-                },
-                before_update: _ => {
-                    console.log("準備更新")
-                    // alert(true)
-                    // return false;
-                },
-                updated: _ => {
-                    console.log("已更新")
+                        // }, 2000)
+                        console.log("已渲染")
+                    },
+                    before_update: _ => {
+                        console.log("準備更新")
+                        // alert(true)
+                        // return false;
+                    },
+                    updated: _ => {
+                        console.log("已更新")
+                    }
                 }
             });
         </script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdquickui",
-    "version": "0.2.1",
+    "version": "0.3.0",
     "description": "PDQuickUI contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
     "main": "dist/PDQuickUI.js",
     "module": "dist/PDQuickUI.module.js",

diff --git a/src/*.ts b/src/*.ts
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
diff --git a/src/PDQuickUI.js b/src/PDQuickUI.js
diff --git a/src/QUI.ts b/src/QUI.ts
diff --git a/src/function/printLog.ts b/src/function/printLog.ts
diff --git a/src/interface.ts b/src/interface.ts
@@ -2,14 +2,6 @@ interface Window {
     QUI: any;
 };
 
-interface vDOM {
-    tag: string;
-    props: { [key: string]: string };
-    children: (vDOM | string)[];
-    data: any;
-    dismiss: boolean;
-};
-
 type Patch =
     | { type: "CREATE"; vdom: vDOM | string; index: number[] }
     | { type: "APPEND"; vdom: vDOM | string; index: number[] }

diff --git a/src/model.ts b/src/model.ts
diff --git a/src/vDOM.ts b/src/vDOM.ts