Vue 2020面试题（二）持续更新

17、keep-alive的作用是什么?

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。在vue 2.1.0版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与exclude(排除的组件不缓存，优先级大于include) 。

使用方法：

<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> </keep-alive> 参数解释： include - 字符串或正则表达式，只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存

include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例：

```

``` 大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用

18、组件的使用和自己创建公用组件

第一步：在components目录新建你的组件文件(indexPage.vue)，script一定要export default {}

第二步：在需要用的页面(组件)中导入：import indexPage from ‘@/components/indexPage.vue’

第三步：注入到vue的子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，问题有indexPage命名，使用的时候则index-page。

19、vue常用的修饰符？

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

20、vue中key值的作用？

避免dom节点复用，让每一次数据改变都重新渲染dom节点当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。