2025-04-21

Vue 框架的核心原理

MVVM

MVVM 是Mode-View-ViewModel的簡稱

Model: 管理資料來源如Api與本地資料庫
View: 顯示ＵＩ和接收使用者動作
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

Vue3（Composition API）＋Pinia

createPinia：創建 Pinia 實例 defineStore：定義 Store storeToRefs：由於 Store 是 reactive 物件，需要解構才能取出 State

<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>

可直接在解構完的 Store 中使用點運算子取得 Ations Pinia

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

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

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

provid 與inject

//父組件
<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>