千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
Vue选项
什么是选项？
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 `data`、`methods` 和 `mounted`。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
以上是官网对于选项的概念，简单的说，选项是一组由Vue定义好的对象，你可以将你的代码写在指定的选项中，从而获得一些 “特异功能” 。
*注：由于选项是Vue规定好的，因此在使用中我们不能更改其名称，也不可以重复定义*
常用选项
1. data 选项
- 必须是一个函数，将组件需要使用的变量定义在此函数的返回值对象中，定义的变量将会获得一个“特异功能” ---- 响应式
```vue
<template>
<div>
<!-- 在这里使用插值表达式将name渲染到页面 -->
{{ name }}
</div>
</template>
<script>
export default {
// data选项
data(){
return{
// name是响应式的
name:"Jay",
}
},
}
</script>
```
上面例子中的`name`就是一个响应式数据，在值发生改变时，视图（页面）上的`name`也会发生变化，那我们便可以通过操作`name`的变化去使视图发生变化，而不用进行繁琐的DOM操作，这也体现着Vue框架的 **数据驱动** 这一核心思想。
- 为什么数据要定义在`data`函数的返回值中，而不是定义在一个对象中？
- 将数据定义在函数返回值中，可以确保每产生一个组件实例，都会调用一次函数，并返回一个新的对象，开辟一块新的空间。
- 如果将数据定义在对象中，可能会出现类似于浅拷贝中出现的问题，即多个组件实例指向同一块空间，一个组件实例修改数据，则全部数据发生变化。
2. methods 选项
- 此选项是一个对象，其中存放着该组件要使用的函数，比如事件的回调函数...
```vue
<template>
<div>
<!-- 添加点击事件，事件回调函数在methods中定义 -->
<button @click="add">点击加一</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default {
data(){
return{
count:0,
}
},
// 在methods中定义函数（方法）
methods:{
add(){
// 在函数中要使用data中的变量，需加this
this.count++
},
}
}
</script>
```
通过点击事件改变`count`的值，从而使页面上的值随之变化，再次体现 **数据驱动** 的核心思想
3. computed 计算属性
- 计算属性，对象形式，顾名思义，在计算属性中保存着一系列需要经过运算得出的属性
```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: {
// 定义计算属性，类似于函数的定义，返回值就是该计算属性的值
time() {
return this.distance / this.speed
}
}
}
</script>
```
计算属性内部所依赖的数据发生变化时, 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来。
计算属性内部所依赖的数据没有发生变化, 计算属性会直接返回上一次缓存的值。
因此上面例子中的`distance`（路程）与`speed`（速度）无论如何变化，`time`都会计算出正确的值。
4. `directives` 选项, 定义自定义指令( 局部指令 )
我们可以在`directives`选项中创建自定义指令。
```vue
<template>
<!-- 使用自定义指令 -->
<div v-myshow="1"></div>
<div v-myshow="0"></div>
</template>
<script>
export default {
// 在directives中定义一个自定义指令，来模仿v-show的功能
directives: {
//el:添加自定义指令的元素；binding：指令携带的参数
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`文件中都可使用。
*注意: 当局部指令和全局指令冲突时, 局部指令优先生效.*
```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>
```
局部组件只能在当前组件内部使用，需要在任何组件中使用，需要在`main.js`文件中注册为全局组件
```js
// 引入组件
import Test from './Test.vue'
// 注册全局组件，可在所有.vue文件中使用
app.component('Test',Test);
```
6. 其他
`filters` 选项, 定义过滤器，vue2中使用，Vue3中已经弃用
