透過把這樣子的層級結構轉換為對應的「物件」而成的關係模型。

將HTML文本的複雜層級關係，轉換成以物件結構的方式來表現 ，讓程式語言得以與之溝通。
Document Object Model(文件物件模型)

每個瀏覽器都有不同的前綴詞:

• -webkit-: Chrome、Safari、較新版本的 Opera 和 Edge，幾乎所有 iOS 瀏覽器，包括 Firefox for iOS；基本上，任何基於 WebKit 或 Chromium 的瀏覽器
• -moz-: 火狐
• -o-: 舊的 WebKit 之前的 Opera 版本
• -ms-: 在 Chromium 之前的 Internet Explorer 和 Microsoft Edge

JavaScript 是一種單線程的程式語言，簡單的說就是一次只能做一件事:
Event Loop 幾乎無時無刻、每一毫秒都在執行的程式

Stack(堆疊)

Stack 中文翻譯為堆疊，是資料結構的一種，它就像是疊盤子一樣，特性為後進先出

Queue(佇列)

Queue 中文翻譯為佇列，是資料結構的一種，它就像排隊一樣，特性為先進先出

Web APIs

Web API 是瀏覽器提供的方法，它並不是 JavaScript 引擎的一部分，且運作於瀏覽器端，也就是說他們可以同時運行

Event Loop

指的就是這一整個循環，當 Call Stack 被清空則會檢視 Callback Queue，並將其放入 Call Stack，就這樣不斷的循環，達成一個不阻塞的機制

MVVM

MVVM 是Mode-View-ViewModel的簡稱

1. Model: 管理資料來源如Api與本地資料庫
2. View: 顯示ＵＩ和接收使用者動作
3. ViewModel: 從Ｍodel取得View所需的資料

Vue的雙向綁定原理

透過document.createDocumentFragment()方法來建議Dom,隨著vue監聽數據出現改變，透過Object.defineProperty()來實現對數據攔截
Vue 雙向綁定在 3.0 之前都是使用 Object.defineProperty
因此在 Vue3.0 中，用 ES6 的 Proxy 取代了Object.defineProperty

描述v-model,V-if,V-show,v-text,v-bind

• v-model:表單的雙向綁定，當改變資料的同時，隨即驅動改變templete 上渲染的內容
• V-if與V-show:兩者都是條件渲染，V-if透過判斷條件來決定是否顯示，每切換一次就會銷毀節點，在建立產生一次生命週期;V-show是css Display的none的隱藏或是顯示指產生初始化的生命週期
• v-html:如同插入 DOM 元素內容的 innerHTML 語法，安全性較低，但支援 HTML 元素使用，常見為 img 用法，會解析 HTML 元素內容，因此，若是在表單或是留言區使用，很有可能會被有心人力從外部寫入惡意程式碼
• v-text:如同更新 DOM 元素內容的 textContent 語法，若其中有原始內容，則會直接覆蓋
• v-bind:動態綁定，常用於綁定class,圖面，連結

導航守衛

router.beforeEatch 註冊在全域的router檢測，to代表前往的路由，from來自哪裡的路由，next 選擇調用的方法，常是選擇前往某頁面或是選擇中斷
router.beforeEnter:參與同router.beforeEatch相同，但是是使用在單一Router
下面幾種則較少使用
router.beforeResolve
router.berforeRouteEnter
router.beforeROuteUpdate
router.BeforeRouteleave

rouer

query:所傳送的參數會顯示在 URL 裏，配置的是path，不需設置傳參數，刷新頁面不會消失
parms:可以不顯示在 URL 裏，配置的是name，刷新會失去parms資料，使用動態傳參，動態傳參會留在瀏覽器留下url地址，且刷新不會消失

keep-alive

keep-alive:的作用是緩存一個元件的資料狀態，即使它被切換掉，不再呈現在畫面上時，它的資料狀態依然會把存起來，並不會像一般元件那樣被銷毀
該元件在只會跑一次生命週期，之後只會跑 activated 和 deactivated 這兩個生命週期，代替 mounted 和unmounted。

ref與reactive

• ref可以接受任何型態資料，不會對物件或是陣列的屬性變動進行監聽，必須透過.vale來取得資料，
• reactive只接受Object或是Array會對內部屬性變動進行深層監聽,只能傳入物件或陣列，如果你傳入其他的值，Vue 會回傳一個警告訊息，並且無法支援解構賦值

computed 特性

• computed緩存
• computed 的函式必須要回傳一個值
• computed 的值只能被該 computed 函式修改，不能被其他方法修改
• computed 的函式無法傳入參數

methods 特性

• methods 函式被呼叫就一定會執行
• methods 函式不一定要回傳一個值
• methods 函式可傳入參數

watch 特性

• watch 會偵測某個值，當該值有變化時，就會執行。
• watch 可傳入參數，第一個參數是更新後的值，第二是舊值。
• 比起 computed，可以處理非同步工作

你會發現，有些情況即使使用 computed、watch 和 methods 都能實現同一效果。但是，computed 的效能通常都會比較好，因為：

computed 的效能通常都會比較好

• 減少程式碼。
• 當處理資料量多的資料時，因為緩存資料的機制，效能會比較好。

Pinia 狀態管理

Pinia 基本架構（Store、State、Actions）
Actions 與 Vuex Mutations 操作相同，並支援 async function，這是改變 State 的唯一方法。
可以在 actions 中使用 async/await 取得非同步資料後更改 State
可以直接從 store 取得任何的 State
Pinia 對 TS 有著更好的支援，不再需要多餘的 types 來包裝

Vue3（Composition API）＋Pinia
Vue2（Option API）+ Pinia
Vue3（Option API）+ Vuex4

1
2
3
4
5
6
7
8
9
10
11
12

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from "./stores/counter";

const counterStore = useCounterStore()
const { counter } = storeToRefs(counterStore);
console.log(counter)
</script>

<template>
  {{counter}}
</template>

slot 占位符，通過插槽拓展組件

1.通過slot插槽向組件傳遞內容
2.大型企業經常看到
//父組件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- 父組件-->
<template>
  <div>
    <my-component>
      <p>預設插槽的自訂內容</p>
    </my-component>
  </div>
</template>
//子組件
<template>
  <div>
    <slot></slot>
  </div>
</template>

provid 與inject

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//父組件
<template>
   <child></child>
</template>

<script setup lang="ts">
import { ref,provide } from 'vue';
import child from '../components/Inject.vue';//引入
 const title = ref('這是provide to jnject')
 provide('title',title)
</script>
<template>
{{ sendTitle }}
</template>


//子元件
<script setup lang="ts">
import { ref, inject } from 'vue';
const sendTitle =inject('title')
</script>

query

步驟

1. 申請 Google 認證模式OAuth
   以上獲得
   1. CLINENT_ID:憑證內的=>Additional information 用戶端編號 ＝> 圖一
   2. CLINENT_SECRET:憑證內的=>用戶端密鑰 ＝> 圖一
   3. REFRESHTOKEN: OAUTH2 ＝> 圖二
   4. ACCESSTOKEN: OAUTH2 ＝> 圖二
2. 安裝nodemailer

建立 OAuth
Console
Cloud Google

1. 建立一個新專案 2.專案名 3.Api服務，搜尋Gmail Api 4.啟用Gmail Api 5.憑證->Auth 用戶端 ID 6選取外部

取得 Refresh token 與 Access token

接下來請開啟這個網址OAuth 2.0 Playground，然後點一下右上齒輪，並將「Use your own OAuth credentials」打勾輸入剛剛的 Client ID 以及 Client Secret



Step2 取得Token

應用程式建構器 prerender 選項可以是布林值或對象，以進行更精細的配置。當選項為 時false，不進行預渲染。當為 時true，所有選項都使用預設值。當它是一個物件時，每個選項都可以單獨配置。
app.config.ts

• discoverRoutes配置來尋找所有未參數化的路由，預設值是true,
• routesFile檔案路徑，檔名：routes.txt
  路由路徑/api,/product/1,/product/2
ng build

angular.json配置

1
2
3
4
5
6

"options": {
+     "prerender": {
+        "discoverRoutes": true,
+        "routesFile": "routes.txt"
+      },
}

app.config.ts配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+ import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideClientHydration(withEventReplay()),
+    provideHttpClient(withFetch())
  ],
};

routesFile配置

1
2
3
4

/api
/product/1
/product/2

打包以後

1

ng serve

官網