vue面试题
一、vue优点
1.轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
2.简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
3.双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
4.组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
5.虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
6.运行速度更快：相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。
二、vue中的父子组件之间的数据传递之props、$ref和$emit
props是用于数据之间的传递（父组件向子组件），ref也可以用于数据之间的传递（ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。），$emit是用于事件之间的传递（子组件触发父组件里面的方法）。
1.props是用于父组件向子组件传递数据信息（所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。）
这里有两种常见的试图变更一个 prop 的情形：
A.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：
props: ['initialCounter'],
data:function(){return{counter:this.initialCounter }}
B.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase() }}
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
2.通过ref 实现通信
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 refs 对象上。
那应该怎么理解？看看下面的解释：
(1).如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。
(2).如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
prop和$ref之间的区别：
1.prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
2.ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
3.通过emit 实现通信
上面两种示例主要都是父组件向子组件通信，而通过emit实现子组件向父组件通信。对于emit实现子组件向父组件通信。
vm.$emit( event, […arg] ) $emit是可以传递多个参数的
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
三、v-show和v-if指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
四、如何让CSS只在当前组件中起作用？
在组件中的style前面加上scoped
五、
1.keep-alive简介：keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
用法也很简单：
2.props
include - 字符串或正则表达，只有匹配的组件会被缓存
// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
//可以保留它的状态或避免重新渲染
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
//可以保留它的状态或避免重新渲染
问题：如果只想router-view里面某个组件被缓存，怎么办？
1.使用 include/exclude
2.增加 router.meta 属性
// 组件 a
export default{name:'a',data(){return{}}}
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
优点：不需要例举出需要被缓存组件名称
增加 router.meta 属性
// routes 配置
export default [{path:'/:id',name:'edit',component:Edit,meta:{keepAlive:false// 不需要被缓存}}]
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
vue实现前进刷新，后退不刷新：https://juejin.im/post/5a69894a518825733b0f12f2
参考文章：https://www.jianshu.com/p/0b0222954483
六、如何获取dom?
答：ref="domName" 用法：this.$refs.domName
七、说出几种vue当中的指令和它的用法？
v-model双向数据绑定；
v-for循环；
v-if v-show 显示与隐藏；
v-on事件；v-once: 只绑定一次。
八、vue-loader是什么？使用它的用途有哪些？
Vue Loader 是一个webpack的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
Vue Loader 还提供了很多酷炫的特性：
1.允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在