常見考題

• 實體屬性基礎
• 指令 directives
• 生命週期 lifecycle
• 元件間的參數傳遞
• Vue 與實體 DOM 的操作
• Composition API (vue3 新增)

________________________________________

Q1:

難度:

為什麼 Vue 實體內的 data 屬性必須要是 function 的形式回傳？
能不能使用 Arrow function ? 為什麼？

________________________________________

Q2:

難度:

下面這段程式碼是否能正確執行？ 如果不行請說明為什麼。

const vm = Vue.createApp({
data () {
return {
$hello: "Hello Vue.js!"
}
}
}).mount('#app');

________________________________________

Q3:

難度:

下面這段程式碼是否能正確執行？ 如果不行請說明為什麼。

const vm = Vue.createApp({
template: `<div>{{ greeting }}</div> <div>好棒棒!</div>`,
data () {
return {
greeting: "Hello Vue.js!"
}
}
});

vm.mount('#app');

________________________________________

Q4:

難度:

Vue 實體中， computed 、 methods 以及 watch 之間的差異？

它們分別有什麼特性？ 簡單說明什麼時候該用哪個。

________________________________________

Q5:

難度:

試著說明 computed 屬性中， get 與 set 兩個 function 的作用，

以及何時會需要用到它們。

________________________________________

Q6:

難度:

請簡單說明 v-text 與 {{ }} 的差別，如：

<div v-text="text">Hello</div>

<div>{{ text }}</div>

________________________________________

Q7:

難度:

請說明 v-model 的作用，以及背後執行的原理。

________________________________________

Q8

難度:

下面這段程式碼是否能正確執行？ 如果不行請說明為什麼，並說明怎麼修改

<transition-group tag="div" name="slide">
<div v-for="(i, idx) in imgList" v-if="idx === currIdx" :key="i">
<img :src="i">
</div>
</transition>

________________________________________

Q9:

難度:

分別說明 Vue v-on 事件處理中，下列修飾子的作用以及適用時機：

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

________________________________________

Q10:

難度:

簡單說明 v-if 與 key 之間的關係，不加上 key 是否會有問題？

如果將 v-for 提供的 index 當作 key 屬性來使用是否 ok ？

________________________________________

Q11 (Vue2.x 限定)

難度:

間單說明 Vue.$set() 或 this.$set() 的作用？

以及什麼時候需要使用這個方法。

________________________________________

Q12

難度:

若我們想在 Vue 實體建立時就 fetch 外部資料，

會選擇在哪個生命週期 hook 呼叫 API ? 為什麼？

________________________________________

Q13

難度:

簡單說明 $nextTick 的作用，並寫出一個簡單範例 demo 什麼時候需要這個。

________________________________________

Q14 Props

難度:

請說明下列兩段程式碼有什麼不同？

<my-component class="className"></my-component>

<my-component :class="className"></my-component>

________________________________________

Q15 Props

難度:

請問下面這段程式碼出了什麼問題？ 該如何修正：

const app = Vue.createApp({
data() {
return {
books: [
{
name: '0 陷阱！0 誤解！8 天重新認識 JavaScript！',
author: 'Kuro Hsu'
},
{
name: '008 天絕對看不完的Vue.js 3指南: 重新認識 Vue.js',
author: 'Kuro Hsu'
}
]
}
}
});

app.component('my-component', {
template: `<div class="child-app">
<div>書名: <input type="text" v-model="bookInfo.name"></div>
<div>作者: <input type="text" v-model="bookInfo.author"></div>
</div>`,
props: {
'bookInfo': {
type: Object
}
}
});

app.mount('#app');

________________________________________

Q16

難度:

已知有一列表物件如下，請實作一個樹狀選單：

const bookList = [{
name: 'Git',
childNodes: [{
name: '為你自己學 Git',
url: 'https://www.tenlong.com.tw/products/9789864342662'
}]
},
{
name: '前端開發',
childNodes: [{
name: '金魚都能懂的 CSS 選取器',
url: 'https://www.tenlong.com.tw/products/9789864344994'
},
{
name: '0 陷阱！0 誤解！8 天重新認識 JavaScript！',
url: 'https://www.tenlong.com.tw/products/9789864344130'
},
{
name: '讓 TypeScript 成為你全端開發的 ACE！',
url: 'https://www.tenlong.com.tw/products/9789864344895'
},
]
},
{
name: 'Chatbot',
childNodes: [{
name: '人人可作卡米狗：從零打造自己的 LINE 聊天機器人',
url: 'https://www.tenlong.com.tw/products/9789864342938'
}]
}
];

________________________________________

Q17

難度:

簡單實作一個範例來說明 Vue.js 裡 provide 與 inject 的作用。

________________________________________

Q18 動態元件

難度:

說明 is 屬性，以及 keep-alive 的作用。

________________________________________

Q19 (Vue 3.0 新增)

難度:

簡單說明 Vue Composition API 的特性，
並將這份範例程式以 Composition API 的形式改寫：

https://stackblitz.com/edit/vue-uvtycq?file=src/App.vue

完成版
https://stackblitz.com/edit/vue-ludm7s?file=src/App.vue