Chenh

### 命令式與聲明式
- 命令式
	每一步都直接使用js原生實現
- 聲明式
	先列舉要做什麼，在編譯過程再自動生成邏輯
tip. 犧牲性能，提升編程體驗。

### 虛擬DOM
- 虛擬DOM是真實DOM的一個JS對象抽象。其中虛擬DOM即JS對象。
- 真實DOM的屬性眾多，直接操作DOM，對瀏覽器的檢索壓力太大，性能不足。因此使用虛擬DOM，再通過虛擬DOM的變化（diff）去映射操作真實DOM，以提高性能。
- 在Vue中，虛擬DOM的組成部分就是VNode（js對象），每一個VNode擁有children - VNode數組，這樣就構成一個樹形結構，這便是虛擬DOM樹。
- VNode.elm 指向了真實 Node， VNode.context 指向vue實例

### 運行時與編譯時
- 運行時
	- 使用render渲染函數將虛擬DOM直接轉換為真實DOM
	- 運行時 有一定性能支出
	- 虛擬DOM與真實DOM結構類似，是直接的映射關係，無法分析用戶提供的內容。
- 編譯時
	- 解析Template模板內容，轉化為真實DOM
	- 編譯過程可以讀取模板語法，可以分析用戶內容。
	- 性能較佳
- 運行時+編譯時 Vue
	- 利用template模板，生成render函數
	- 使用render函數將虛擬DOM轉化為真實DOM

### Vue UI
- 模板描述 聲明式
- render函數 命令式 render函數（h函數）返回值是一個虛擬DOM（VNode）
### 初始渲染器
- renderer 對象 使用函數 createRenderer 生成
- 參數： 虛擬DOM對象（VNode） 掛載容器（真實DOM元素）
- renderer 作用是將虛擬DOM掛載在真實DOM元素上
### 區分
- render是vue提供給用戶，操作虛擬DOM的途徑
- renderer 是vue將虛擬DOM轉化為真實DOM的工具

### 副作用函數 與 響應式數據
1. 擁有一個全局變量 A，它被函數innerText與視圖關聯。
2. 當我們修改了變量A，關聯元素並不會更新
3. 只有再一次執行 innerText，視圖才會更新
- 我們稱 innerText 就是 副作用函數。
- 這個涉及視圖變化的變量A 就是響應式數據

### 核心邏輯
- 必須有 setter getter / 訪問器
- 類似高級語言中的 訪問器，虛擬DOM對象 以及 數據對象 都可以使用訪問器，來實現類似高級語言中的數據綁定模式。
### 基本原理
- getter: 響應式數據
	當觸發讀取操作，則將該副作用函數列入“名單”
- setter: 響應式數據
	當觸發設置操作，再次執行副作用函數以更新視圖
### 實現原理
- Vue2 中 使用 Object.defineProperty()
- Vue3 中 使用 Proxy() Reflect

### 響應性調度
- 當響應數據發生變化，副作用函數”名單“被執行，那麼控制”名單“的執行順序，就很重要。
- 響應性調度的關鍵在於 異步編程Promise 隊列模型jobQueue
- **懶性執行** 
- **計算屬性** 也依賴於調度系統
- watch 監聽器，當監聽對象發生變化，執行回調。
- 當監聽器的回調中有異步操作，則可能導致執行結果不符合預期，使用 onInvalidate() 停止過期的異步請求。
### 實現
- 對象的響應性 Proxy + Reflect
- 非對象的響應性（基本類型） ref

### DSL 編譯器
- 特定語言編譯器
- 本質是 將模板 編譯為 render 渲染函數
1. parse 模板 -> AST對象
2. transform  AST -> JavascriptAST
3. generate  JsAST -> render函數

## 指令
- 是指帶有·v-·前綴的特殊屬性，
- 指令的期望值是 js表達式，用來在表達式發生變化時響應更新DOM
- `v-bind:href="xxx.api"`後可以帶 指令參數
- `:[attributeObj]="xxx.api"` 參數可以時動態的，但表達式需要用方括號包圍
- ** HTML 中的字符會自動處理為小寫，且不可以為空格 **
- ** 推薦使用 計算屬性**

** 使用組合式API **

import { reactive } from 'vue'
const state = reactive({ count: 0 })

import { reactive } from 'vue'
// 組件的默認行為
export default {
  // setup 用於組合式 API 的鉤子函數
  setup(){
    // 定義 響應式對象
    const state = reactive({ count: 0 })
    // 定義 方法
    function increment(){
      state.count++
      // 全局API 更新DOM的下個Tick
      nextTick(()=>{
        // xxx
      })
    }
    // 暴露 state 到模板
    return {state, increment}
  }
}

<template>
	<button @click="increment">
    {{ state.count }}
  </button>
</template>

<script setup>
	import {ref} from 'vue'
  const count = ref(0)
  function increment(){
    count.value++
  }
  const obj = { foo: ref(1) }
</script>
<template>
	<button @click="increment">
    {{ count }}
  </button>
	<button>
    {{ obj.foo + 1 }} <!--[object:object]1 -->
  </button>
</template>

<script setup>
  import { reactive, d } from 'vue'
  const author = reactive({
    name: 'John Doe',
    books: [
      'Vue 2' - 'Advanced Guide',
      'Vue 3' - 'Advanced Guide',
      'Vue 4' - 'Advanced Guide',
    ]
  })
  // 響應式計算屬性
  const publishedBooksMessage = computed(()=>{
    return author.books.length > 0 ? 'Yes':'No'
  })
</script>
<template>
	<p>
    Has Publiched books:
  </p>
	<span>{{ author.books.length > 0? 'Yes':'No'}}</span>
	<span>{{ publishedBooksMessage }}</span>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  
  const isActive = ref(true)
  const hasError = ref(false)
  
  const classObject = reactive({
    active: true,
    'text-danger': false
  })
  const classComput = computed(()=>({
    active: isActive.value && !error.value,
    'text-danger': error.value && error.value.type ==='fatal'
  }))
</script>
<template>
	<div class="static" :class="{ active: isActive, 'text-danger': hasError }"> 綁定ref元素	</div>
  <div :class="classObject"> 綁定對象 </div>
	<div :class="classComput"> 綁定計算屬性 </div>
	<div :class="[isActive ? activeClass : '', errorClass]"> 綁定對象數組 </div>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  
  const activeColor = ref('red')
  const fontSize = ref(30)
  
  const styleObject = reactive({
    color: 'red',
    fontSize: '13px'
  })
</script>
<template>
	<div :style="{ color: activeColor, fontSize: fontSize + 'px'}"> 駝峰命名的style元素 </div>
	<div :style="{ 'font-size': fontSize + 'px' }"> 短橫風格的實際style-key名稱 </div>
	<div :style="styleObject"> 綁定對象 </div>
	<div :style="[baseStyles, overridingStyles]"> 綁定數組 </div>
</template>

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>
	<template v-if="awesome">
    <h1>Vue is awesome!</h1>
    <h1>Oh no 😢</h1>
  </template>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  const items = ref([{message: 'foo'}, {message: 'bar'}])
  const object = reactive({
    title: "how to do lists in Vue",
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  })
</script>
<!-- v-for 在模板中可用 -->
<template v-for="it in 1">
	<li v-for="n in 10">{{n}}</li>
	<!-- 重複元素中，可以完整訪問父作用域的屬性和變量，item則只在內部 -->
	<li v-for="item in items">{{item.message}}</li>
	<!-- 遍歷對象，返回對象所有屬性，順序基於 Object.keys -->
	<li v-for="value in object">{{value}}</li>
	<!-- 遍歷對象，返回兩/三個參數 -->
	<li v-for="(value, key, index) in object">{{key}}:{{value}}</li>
</template>

<script setup>
	// ...
  const count = ref(0)
</script>
<template>
	<button @click="count++">
    Add 1
  </button>
	<p>
    Count is: {{ count }}
  </p>
</template>

<script setup>
	const name = ref('world!')
  
  function greet(event){
    alert('Hello ${name.value}')
    // event是DOM原生事件
    if(even){
      // 使用 event.target 獲取原生事件對象
      alert(event.target.tagName)
    }
  }
</script>
<template>
	<!-- greet -->
	<button @click="greet">
    Greet
  </button>
</template>

<input :value='text'
       @input="event => text=event.target.value">

<input v-model="text">

<!-- ☑️ true 🔲 false -->
<!-- :true-value :false-value -->
<input type='checkbox' v-model="checked"/>
<label for="chekcbox">{{ checked }}</label>

<!-- 選中的項目的value會被添加到數組中 -->
<script setup>
	const checkNames = ref([])
</script>
<template>
	<div>
    Checked Names: {{ checkNames }}
  </div>
	<input type="checkbox" value="Jack" v-model="checkNames">
	<label for="jack">Jack</label>
	<input type="checkbox" value="Tom" v-model="checkNames">
	<label for="jack">Jack</label>
	<input type="checkbox" value="Mike" v-model="checkNames">
	<label for="jack">Jack</label>
</template>

<div>
  Picked: {{picked}}
</div>
<input type='radio' value="One" v-model="picked"/>
<input type='radio' value="Two" v-model="picked"/>
<!-- vue使用Value值來區分不同按鈕 -->

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <!-- 推薦提供一個空值的禁用選項 -->
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script setup>
	import {ref, watch} from 'vue'
  const question = ref('')
  const answer = ref('Questions usually contain ...')
  const myobj = reactive({ count: 0 })
  
  watch(question, async(newvalue, oldvalue)=>{...})
  // 注意，對於一個響應式對象，不可以監聽其成員，因為得到的是一個值
  // 應該使用 Getter 函數
  watch(()=>myobj.count,(count)=>{ ... })
</script>

<script setup>
  import { reactive } from 'vue'
	const obj = reactive({ count:0 })
  watch(obj,()=>{
    // 自動啟用深層監聽
  })
  watch(()=>obj,(newv,oldv)=>{
    // 只有返回不同的obj對象，才會觸發。
  },{deep:true/* 強制轉為深層監聽 */})
</script>

<script setup>
	const todoId = ref(1)
  const data = ref(null)
  
  watch(todoId, async()=>{
    const response = await fetch(
    	'https://xxx.xxx.com/api/todos/${todoId.value}'
    )
    data.value = await response.json()
  },{immediate:true})
  // 等價於
  watchEffect(async()=>{
    // ...
  })
</script>

<script setup>
	import {ref, onMounted} from 'vue'
  
  // 聲明一個引用 ref 來存放模板引用
  const input = ref(null)
  onMounted(()=>{
    input.value.focus()
  })
</script>
<template>
	<!-- ref 名稱必須和 腳本中的變量名相同。 -->
	<input ref="input"/>
</template>

<input :ref="(el)=>{ ... }"/>

<script setup>
	defineProps(['title'])
</script>
<template>
	<h4>
    {{ title }}
  </h4>
</template>

export default {
  props: ['title'],
  // 必須將props作為參數傳入setup
  setup(props) {
    console.log(props.title)
  }
}

<script setup>
	import AlertBox from '/alertbox.vue'
</script>
<template>
	<AlertBox>
  	The Slot Message.
  </AlertBox>
</template>

<!-- 這裡是 alertbox.vue 子組件 -->
<template>
	<slot/>
</template>

<!-- App.vue -->
<script>
	import { createApp } from 'vue'
  import MyComponent from './mycomponent.vue'
  const app = createApp({})
  // 1. 直接註冊
  app.component('componentName', {/* 組件實現 */})
  // 2. 單文件註冊
  app.component('componentName', MyComponent)
  // 3. 可鏈式調用
  app
    .component('componentName', MyComponent)
    .component('componentName', MyComponent)
    .component('componentName', MyComponent)
</script>

<script setup>
	defineProps({
    title: String,
    likes: Number
  })
  export default {
    props: {
      title: String,
      likes: Number
    }
  }
</script>

import { createApp } from 'vue'
import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      count: 0
    }
  },
  mutations: {
    increment(state){
      state.count++
    }
  }
})
const app = createApp({})
app.use(store)
// 使用 store.commit('name') 觸發狀態變更
// 使用 store.state 獲取對象
// 在所有VUE組件中，使用 this.$store 訪問store實例 （選項式）
// 在setup中導入useStore，並使用其訪問store。 （組合式）

<p>
  <router-link to="/">GO to home</router-link>
  <router-link to="/about">Go to About</router-link>
</p>
<router-view>路由出口</router-view>

// 1. 示例組件
const Home = {template: '<div>Home</div>'}
const About = {template: '<div>About</div>'}
// 2. 定義路由對象
// 每一個路由對象都包含一個路徑，以及組件
const routes = [
  {path:'/', component: Home},
  {path:'/about', component: About},
]
// 3. 創建路由實例，設置路由配置。
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // => routes: routes
})

// 將路由掛載到 vueApp
const app = Vue.createApp({})
app.use(router)
app.mount("#app")

const routes = [
  {path:'/:pathMatch(.*)*'}
]

const router = createRouter({
  // ... 
  routes: [/* ... */],
  strict: true,
  sensitive: true,
})

<template>
	<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
	</router-link>
</template>
<script>
	router.push({ name: 'user', params: { username: 'erina' } })
</script>

// 向前移動一條記錄，與 router.forward() 相同
router.go(1)

// 返回一條記錄，與 router.back() 相同
router.go(-1)

// 前進 3 條記錄
router.go(3)

// 如果沒有那麼多記錄，靜默失敗
router.go(-100)
router.go(100)

<template>
  <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
  <router-view class="view main-content"></router-view>
  <router-view class="view right-sidebar" name="RightSidebar"></router-view>
</template>
<script></script>

{
  // `url` 是用於請求的服務器 URL
  url: '/user',

  // `method` 是創建請求時使用的方法
  method: 'get', // 默認值

  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  // 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允許在向服務器發送前，修改請求數據
  // 它只能用於 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
  // 陣列中最後一個函數必須返回一個字符串， 一個Buffer實例，ArrayBuffer，FormData，或 Stream
  // 你可以修改請求頭。
  transformRequest: [function (data, headers) {
    // 對發送的 data 進行任意轉換處理

    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
  transformResponse: [function (data) {
    // 對接收的 data 進行任意轉換處理

    return data;
  }],

  // 自定義請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是與請求一起發送的 URL 參數
  // 必須是一個簡單對象或 URLSearchParams 對象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可選方法，主要用於序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作為請求體被發送的數據
  // 僅適用 'PUT', 'POST', 'DELETE 和 'PATCH' 請求方法
  // 在沒有設置 `transformRequest` 時，則必須是以下類型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專屬: FormData, File, Blob
  // - Node 專屬: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // 發送請求體數據的可選語法
  // 請求方式 post
  // 只有 value 會被發送，key 則不會
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定請求超時的毫秒數。
  // 如果請求時間超過 `timeout` 的值，則請求會被中斷
  timeout: 1000, // 默認值是 `0` (永不超時)

  // `withCredentials` 表示跨域請求時是否需要使用憑證
  withCredentials: false, // default

  // `adapter` 允許自定義處理請求，這使測試更加容易。
  // 返回一個 promise 並提供一個有效的響應 （參見 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示瀏覽器將要響應的數據類型
  // 選項包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 瀏覽器專屬：'blob'
  responseType: 'json', // 默認值

  // `responseEncoding` 表示用於解碼響應的編碼 (Node.js 專屬)
  // 注意：忽略 `responseType` 的值為 'stream'，或者是客戶端請求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默認值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名稱
  xsrfCookieName: 'XSRF-TOKEN', // 默認值

  // `xsrfHeaderName` 是帶有 xsrf token 值的http 請求頭名稱
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默認值

  // `onUploadProgress` 允許為上傳處理進度事件
  // 瀏覽器專屬
  onUploadProgress: function (progressEvent) {
    // 處理原生進度事件
  },

  // `onDownloadProgress` 允許為下載處理進度事件
  // 瀏覽器專屬
  onDownloadProgress: function (progressEvent) {
    // 處理原生進度事件
  },

  // `maxContentLength` 定義了node.js中允許的HTTP響應內容的最大字節數
  maxContentLength: 2000,

  // `maxBodyLength`（僅Node）定義允許的http請求內容的最大字節數
  maxBodyLength: 2000,

  // `validateStatus` 定義了對於給定的 HTTP狀態碼是 resolve 還是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，
  // 則promise 將會 resolved，否則是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默認值
  },

  // `maxRedirects` 定義了在node.js中要遵循的最大重定向數。
  // 如果設置為0，則不會進行重定向
  maxRedirects: 5, // 默認值

  // `socketPath` 定義了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 發送請求到 docker 守護進程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，這使用 `socketPath` 。
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定義了代理服務器的主機名，端口和協議。
  // 您可以使用常規的`http_proxy` 和 `https_proxy` 環境變量。
  // 使用 `false` 可以禁用代理功能，同時環境變量也會被忽略。
  // `auth`表示應使用HTTP Basic auth連接到代理，並且提供憑據。
  // 這將設置一個 `Proxy-Authorization` 請求頭，它會覆蓋 `headers` 中已存在的自定義 `Proxy-Authorization` 請求頭。
  // 如果代理服務器使用 HTTPS，則必須設置 protocol 為`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` indicates whether or not the response body should be decompressed 
  // automatically. If set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默認值

}

{
  // `data` 由服務器提供的響應
  data: {},

  // `status` 來自服務器響應的 HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: 'OK',

  // `headers` 是服務器響應頭
  // 所有的 header 名稱都是小寫，並且可以使用方括號語法訪問
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 請求的配置信息
  config: {},

  // `request` 是生成此響應的請求
  // 在node.js中它是最後一個ClientRequest實例 (in redirects)，
  // 在瀏覽器中則是 XMLHttpRequest 實例
  request: {}
}

// 請求攔截 在發送請求前進行處理
axios.interceptors.request.use(function(config){
  // 發送前處理
  return config;
}, function(error){
  // 請求錯誤處理
  return Promise.reject(error);
});

// 響應攔截
axios.interceptors.response.use(function(response){
  // 2xx 狀態碼時
  return response;
}, function(error){
  // 超出 2xx
  return Promise.reject(error);
})

const myInterceptor = axios.interceptors.request.use(...)
axios.interceptors.request.eject(myInterceptor)

const instance = axios.create()
instance.interceptors.request.use()