Vue常见的面试题汇总
1、V-if和V-show的区别
答案：区别就是dom元素是否挂载了，v-show是dom树上有内容，不显示，display：none；v-if是dom树上无内容
2、Vue组件间是怎么通讯的
答案：1、父组件-->子组件
方式：父组件给子组件绑定属性，子组件通过props属性来接收传递的数据
注意：属性的值必须在组件中通过props属性指定，属性名必须与父组件中定义的一致。props可以是一个数组或对象
2、子组件-->父组件
方式：在父组件中声明一个接受数据的函数,父组件给子组件绑定事件，子组件通过$emit触发事件，并且可在此时传递参数，
父组件通过定义好的监听事件接收参数（注意参数是什么 ）
3、非父子组件间的通讯
方式: 创建一个新Vue的实例，让各个兄弟共用同一个事件机制。（关键点）
传递数据方，通过事件触发$emit(方法名， 传递的数据)。
接收数据方，在mounted() 钩子函数(挂载实例) 中 触发事件$on(方法名， callback(接收数据的数据))，
此时callback函数中的this已经发生了改变， 可以使用箭头函数。
对于大型复杂的项目，采用vuex 状态管理更适合
3、常见指令
答案：
v-text:更新DOM对象的 textContent
v-html:更新DOM对象的 innerHTML
v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-on:绑定事件
v-for:基于源数据多次渲染元素或模板块
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性
v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
4、怎么定义组件
答案：
全局定义：Vue.component(组件名, {template: 模板字符串})
局部定义：components:{组件名: {template: 模板字符串}}
单文件组件：包含template，script，style三部分
5、vue路由是怎么做的（路由的原理）
答案：浏览器URL中的哈希值（# hash）和 component的对应关系，一个哈希值对应一个组件
6、怎么请求数据的
答案：用axios发送请求
7、谈谈组件化和模块化的区别
答案：
组件化：组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的组件，主要目的就是减少耦合。
一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。
这样，独立出来的组件可以单独维护和升级而不会影响到其他的组件。
模块化：模块化的目的在于将一个程序按照其功能做拆分，分成相互独立的模块，
以便于每个模块只包含与其功能相关的内容，模块之间通过接口调用。
将一个大的系统模块化之后，每个模块都可以被高度复用。
区别：模块化的目的是为了重用，模块化后可以方便重复使用和插拨到不同的平台，不同的业务逻辑过程中。
组件化的目的是为了解耦，把系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。
8、Vue的数据双向绑定原理（如果更深层的话就要涉及到订阅发布者模式了可以自己看）
答案：
Vue在初始化实例的时候，会把data中所有的数据，用Object.defineProperty方法全部加给vm对象，
这个时候，vm对象中的数据就有了set和get方法，set这个函数会在属性被赋值的时候自动调用，
get这个函数会在属性被获取值的时候自动调用，用户获取到的属性的值，其实就是get方法的返回值。也就能实现双向绑定了
9、Vue全家桶有些什么
vue：主要Vue
vue-router：关于路由方面的配置
vuex：数据共享和缓存用
vue-resource：于后台交互用（现在改为axios 但是axios不是Vue里面的东西）
vue-cli：快速创建项目的脚手架
答案：
10、Filter过滤器
作用：
文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出（可以直接说过滤）
过滤器可以用在两个地方：{{}}和 v-bind 表达式
两种过滤器：1 全局过滤器 2 局部过滤器
11、Vue生命周期
一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
beforeCreate()
说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法
created()
说明：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
beforeMounted()
说明：在挂载开始之前被调用,此时无法获取到el中的DOM元素
mounted()
说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
beforeUpdated()
说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
updated()
说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作
beforeDestroy()
说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
destroyed()
说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
12、小程序和vue的区别和联系
区别：微信小程序是运行在微信里的APP，vue是一个流行框架
联系：微信小程序借鉴了vue的部分语法，但也有一些区别，例如：显示隐藏元素，v-show和hidden；事件处理：v-on和bindtap
13、Vuex的使用和五个核心
五个核心：state , getter , mutation , action , module
14、vue中Tab栏怎么实现
每一个tab标题对应一个tab组件，并且每一个标题都有一个点击事件和传入的参数，在点击的时候tab组件接收参数来控制显示和隐藏
也可以用路由实现，适用于全屏的tab
15、在vue中获取dom元素
在vue中可以通过给标签加ref属性，就可以在js中利用$refs去引用它，从而操作该dom元素
16、vue单页面 首屏加载怎么优化
-
按需加载
-
基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化
-
异步组件
-
优化组件加载时机
18、什么是MVVM。分别描述一下你对MVVM优缺点的理解
即：Model-View-ViewModel 它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定，
这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
MVVM不仅简化了业务与界面的依赖关系，还优化了数据频繁更新的解决方案，甚至可以说提供了一种有效的解决模式。
MVVM用来做服务端是极其不适用的，因为：网络资源成本过高 开发成本过高
19、vue.js的view-model是如何工作的
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。
它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，
保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
20、vue中$set什么时候用
生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去，此时使用 vm.$set实例方法，这也是全局 Vue.set方法的别名
21、Vue-cli的src文件夹中有哪些文件
assets中是图片，字体等一些静态资源
components中是组件
filters中是过滤器
router中是路由文件
App.vue 根组件
mian.js
22、vue-router有哪几种导航钩子？（具体怎么用的）
三种，
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件
23、路由之间是如何跳转的跳转？
1、router-link to = 'path'
2、router.push('path')
24、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
25、vue-router是什么？它有哪些组件？
vue用来写路由一个插件。router-link、router-view
26、如何让CSS只在当前组件中起作用?
将当前组件的style修改为<style scoped>
27、<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
28、如何实时修改data中数组中的值（数据改变试图改变）
this.$set(this.data,”key”,value’)
$set的使用方法自己查
29、slot是什么
插槽：
三种方式：1、匿名插槽
2、具名插槽
3、带参数的插槽
