# vue note

[TOC]

## 關聯筆記
- [vue - eslint](/aS2bTjzxRmWRGbQdQAuJMQ)
- [electron x vue](/SaeAHOqhTkaYADYrzXqbeQ)

---
## shorthand
- `v-bind:xxx="yyy"` -> `:xxx="yyy"`

    <img v-bind:src="imageSrcUrl">
    <img :src="imageSrcUrl">

- `v-on:xxx="yyy"` -> `@xxx="yyy"`

    <button v-on:click="alert('Hello!')">Click</button>
    <button @click="alert('Hello!')">Click</button>

- `v-slot:xxx="yyy"` -> `#xxx="yyy"`

    <template v-slot:header></template>
    <template #header></template>

## 雜項
- `.trim` 修飾詞除了字串中間的空白, 和原生字串的 `trim()` 不同.
- `v-for="page in 10"`, 這樣的寫法 `page` 會從 `1` 開始.

---
## ts - 非預設型別的宣告補強
使用 [PropType](https://vuejs.org/v2/guide/typescript.html#Annotating-Props) 宣告

---
## Vetur - [Interpolation Support](https://vuejs.github.io/vetur/guide/interpolation.html#generic-language-features)
很重要的功能, 但尚在實驗中, 遇到非組件的型別會被標示錯誤直接GG.

---

### [學習筆記 - 重新認識 Vue.js](/INqqAxf-Qbq2B4iI3br60w)

---
## 問題集

### 如何保持 Proxy 且一次 assign 一個物件的屬性

this.setup = Object.assign(this.setup, appliedSetupObj);

P.S. 不能直接使用 ES6 的[解構賦值(Destructuring assignment)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

### Uncaught DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned
直接把 vue 控管的 data 帶進 postMessage function, 會引發此問題.
e.g.

xxx.postMessage(this.config);

#### 處理方式
1. 轉換成原生物件

    let config = JSON.parse(JSON.stringify(this.config));
    xxx.postMessage(config);

2. 利用 computed 機制

    computed: {
        rawConfig() {
            return JSON.parse(JSON.stringify(this.config));
        }
    }

    // 注意這裡要視為 getter
    xxx.postMessage(this.rawConfig);

### vue Failed to compile. TS2339: Property 'xxx' does not exist on type '
#### 處理方式
確保所有使用 ts 的地方都有用 `defineComponent()` 包裹

###### tags: `vue`