千鋒教育web前端高頻面試題視頻教程，kerwin大話前端面試秘籍（附答案）
Vue選項
什么是選項？
使用選項式 API，我們可以用包含多個選項的對象來描述組件的邏輯，例如 `data`、`methods` 和 `mounted`。選項所定義的屬性都會暴露在函數(shù)內(nèi)部的 this 上，它會指向當(dāng)前的組件實例。
以上是官網(wǎng)對于選項的概念，簡單的說，選項是一組由Vue定義好的對象，你可以將你的代碼寫在指定的選項中，從而獲得一些 “特異功能” 。
?*注：由于選項是Vue規(guī)定好的，因此在使用中我們不能更改其名稱，也不可以重復(fù)定義*
常用選項
1. data 選項
- 必須是一個函數(shù)，將組件需要使用的變量定義在此函數(shù)的返回值對象中，定義的變量將會獲得一個“特異功能” ---- 響應(yīng)式
```vue
<template>
?<div>
???<!-- 在這里使用插值表達式將name渲染到頁面 -->
???{{ name }}
?</div>
</template>
<script>
export default {
???// data選項
???data(){
???????return{
???????????// name是響應(yīng)式的
???????????name:"Jay",
???????}
???},
}
</script>
```
上面例子中的`name`就是一個響應(yīng)式數(shù)據(jù)，在值發(fā)生改變時，視圖（頁面）上的`name`也會發(fā)生變化，那我們便可以通過操作`name`的變化去使視圖發(fā)生變化，而不用進行繁瑣的DOM操作，這也體現(xiàn)著Vue框架的 **數(shù)據(jù)驅(qū)動** 這一核心思想。
- 為什么數(shù)據(jù)要定義在`data`函數(shù)的返回值中，而不是定義在一個對象中？
?- 將數(shù)據(jù)定義在函數(shù)返回值中，可以確保每產(chǎn)生一個組件實例，都會調(diào)用一次函數(shù)，并返回一個新的對象，開辟一塊新的空間。
?- 如果將數(shù)據(jù)定義在對象中，可能會出現(xiàn)類似于淺拷貝中出現(xiàn)的問題，即多個組件實例指向同一塊空間，一個組件實例修改數(shù)據(jù)，則全部數(shù)據(jù)發(fā)生變化。
2. methods 選項
- 此選項是一個對象，其中存放著該組件要使用的函數(shù)，比如事件的回調(diào)函數(shù)...
```vue
<template>
???<div>
???????<!-- 添加點擊事件，事件回調(diào)函數(shù)在methods中定義 -->
???????<button @click="add">點擊加一</button>
???????<p>{{ count }}</p>
???</div>
</template>
<script>
export default {
???data(){
???????return{
???????????count:0,
???????}
???},
???// 在methods中定義函數(shù)（方法）
???methods:{
???????add(){
???????????// 在函數(shù)中要使用data中的變量，需加this
???????????this.count++
???????},
???}
}
</script>
```
通過點擊事件改變`count`的值，從而使頁面上的值隨之變化，再次體現(xiàn) **數(shù)據(jù)驅(qū)動** 的核心思想
3. computed 計算屬性
- 計算屬性，對象形式，顧名思義，在計算屬性中保存著一系列需要經(jīng)過運算得出的屬性
```vue
<template>
???<p>路程：{{ distance }} km</p>
???<p>速度：{{ speed }} km/h</p>
???<!-- 使用計算屬性，與變量的使用相同 -->
???<p>花費的時間：{{ time }} h</p>
</template>
<script>
export default {
???data() {
???????return {
???????????distance: 1000,
???????????speed: 50,
???????}
???},
???computed: {
???????// 定義計算屬性，類似于函數(shù)的定義，返回值就是該計算屬性的值
???????time() {
???????????return this.distance / this.speed
???????}
???}
}
</script>
```
計算屬性內(nèi)部所依賴的數(shù)據(jù)發(fā)生變化時, 計算屬性本身就會自動重新計算返回一個新的計算值并緩存起來。
計算屬性內(nèi)部所依賴的數(shù)據(jù)沒有發(fā)生變化, 計算屬性會直接返回上一次緩存的值。
因此上面例子中的`distance`（路程）與`speed`（速度）無論如何變化，`time`都會計算出正確的值。
4. `directives` 選項, 定義自定義指令( 局部指令 )
我們可以在`directives`選項中創(chuàng)建自定義指令。
```vue
<template>
???<!-- 使用自定義指令 -->
???<div v-myshow="1"></div>
???<div v-myshow="0"></div>
</template>
<script>
export default {
???// 在directives中定義一個自定義指令，來模仿v-show的功能
???directives: {
???????//el:添加自定義指令的元素；binding：指令攜帶的參數(shù)
???????myshow(el, binding) {
???????????if (binding.value) {
???????????????el.style.display = "block";
???????????} else {
???????????????el.style.display = "none";
???????????}
???????}
???}
}
</script>
<style scoped>
div {
???width: 100px;
???height: 100px;
???background-color: red;
???margin: 10px;
}
</style>
```
像以上這種，在組件中定義的指令是局部指令，只能在本組件中使用，全局指令需要在`main.js`文件中定義，全局指令在任何`.vue`文件中都可使用。
*注意: 當(dāng)局部指令和全局指令沖突時, 局部指令優(yōu)先生效.*
```js
var app = createApp(App)
//定義全局指令
app.directive("myshow", (el, binding) => {
???if (binding.value) {
???????el.style.display = "block";
???} else {
???????el.style.display = "none";
???}
})
// 全局指令可在任何組件使用
```
5. `components`組件選項（注冊局部組件）
- 在一個組件中我們可能會使用到其他組件，在將組件引入后，需要在`components`中進行注冊，才能使用。
```vue
<template>
???<!-- 使用組件 -->
???<Test />
</template>
<script>
// 引入組件
import Test from './Test.vue'
export default {
???// 注冊組件
???components: {
???????Test
???},
}
</script>
```
局部組件只能在當(dāng)前組件內(nèi)部使用，需要在任何組件中使用，需要在`main.js`文件中注冊為全局組件
```js
// 引入組件
import Test from './Test.vue'
// 注冊全局組件，可在所有.vue文件中使用
app.component('Test',Test);
```
6. 其他
`filters` 選項, 定義過濾器，vue2中使用，Vue3中已經(jīng)棄用
