Vue 高频面试题总结02 内附答案

1、Vue 中 solt 的使用方式，以及 solt 作用域插槽的用法

使用方式：当组件当做标签进行使用的时候，用 slot 可以用来接受组件标签包裹的内容，当给 solt 标签添加 name 属性的 时候，可以调换响应的位置

插槽作用域： 作用域插槽其实就是带数据的插槽，父组件接收来自子组件的 slot 标签上通过 v-bind 绑定进而传递过来的数 据，父组件通过 scope 来进行接受子组件传递过来的数据

2、Vue 该如何实现组件缓存?

在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来，那么自然会存在组件之前切换的问题，Vue 中有个动态组件的概念，它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的变化，去要切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的，而我们需要保留组件的状态，为了解决这个问题，需要使用到 Vue 中内置组件<keep-alive>

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染，

简答的说: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

3、跟 keep-alive 有关的生命周期是哪些？

生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

1. activated 钩子：在在组件第一次渲染时会被调用，之后在每次缓存

2. deactivated 钩子：组件被停用（离开路由）时调用。

4、Vue 常用的修饰符都有哪些？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

5、Vue 常用的指令都有哪些？并且说明其作用

1、 v-model 多用于表单元素实现双向数据绑定

2、 v-for 格式： v-for="字段名 in(of) 数组 json" 循环数组或 json

3、 v-show 显示内容 （同 angular 中的 ng-show）

4、 v-hide 隐藏内容（同 angular 中的 ng-hide）

5、 v-if 显示与隐藏 （dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false）

6、 v-else-if 必须和 v-if 连用

7、 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

8、 v-bind 动态绑定 作用： 及时对页面的数据进行更改

9、 v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在 methods里面

10、v-text 解析文本

11、v-html 解析 html 标签

12、v-once 进入页面时 只渲染一次 不在进行渲染

13、v-cloak 防止闪烁

14、v-pre 把标签内部的元素原位输出

6、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

全局定义指令：在 Vue 对象的 directive 方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数：el、binding

7、为什么避免 v-if 和 v-for 用在一起

v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

8、v-show 和 v-if 指令的共同点和不同点?

相同点: 控制元素的显示和隐藏

不同点:

1.原理不同

v-if原理是动态设置元素 新增和删除

v-show原理是设置元素的样式 display

2.编译区别

v-if满足条件才会编译,不满足不编译(惰性编译)

v-show一定会编译

3.性能不同

v-show频繁切换性能高于v-if

9、watch、methods 和 computed 的区别?

1．computed：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

2．methods：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

3．watch：

观察和响应 Vue 实例上的数据变动，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象，Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

10、怎么在 watch 监听开始之后立即被调用？

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。