---
# System prepended metadata

title: Vue

---

# Vue
1. v-if v-show 功能的不同
2. v-for 的功能，v-bind:key 有什麼用
3. component 中父子元件的互動，傳值與呼叫函數
4. 是否知道 Vue 實例(instance)生命週期(lifecycle)
  + 如果有一個 canvas 需要控制，那可以在哪個生命週期階段“儘早地”找到他
  + 要在 Vue 實例中想監聽“頁面捲動”的事件，我該注意什麼
  + 有用過 vue3 嗎
    - 說明 composition API 中的生命週期和上述的生命週期有什麼不同
    - 該怎麼找到 instance 和 ref
5. 是否知道 Vue 的 Render flow
  + 簡單說明 compile 和 runtime 分別在幹嘛，分成這兩個部分有什麼意義

# JS
1. hoist

``` js 
var message = 'foo'

function log () {
  console.log(message)
  let message = 'bar'
  console.log(message)
}
log()
```

2. this
``` js
const func = function func() {
  console.log(this.a);
}
const obj = { a: 1, func };
const a = 2;

obj.func()
setTimeout(function () { obj.func() }, 0)
setTimeout(() => { obj.func() }, 0)
setTimeout(obj.func, 0)
```

3. call stack
``` js
const result = []
setTimeout(() => {
  console.log(5)
}, 0)

new Promise((resolve) => {
  console.log(4)
  resolve()
  console.log(3)
}).then(() => {
  console.log(2)
});

console.log(1)
```

# algorithm

1. 你有兩個等長且所有元素都是整數的陣列 A 和 B，請寫出函數能走訪所有陣列 B 中的元素，且與陣列 A 中所有非當前索引元之素相乘後的結果。

```
範例
INPUT 1
  A = [2, 3];
  B = [4, 5];
OUTPUT 2
  result = [12, 10]

INPUT 2
  A = [2, 3, 4];
  B = [5, 6, 7];
OUTPUT 3
  result = [60, 48, 42]
```

``` js
  const func = (A, B) => {
    // write your code here
  }
