1.Vue的优势？答：轻量级框架：只关注视图层，是一组视图构建数据，大小只有几十kb；易学：中文开发，中文文档，无语言障碍，易懂易学；双向数据绑定：保留了angular的特点，数据操作更简单；组件化：保留了react的优点，实现了html的封装和复用，在构建单页应用方面具有独特的优势；视图、数据、结构分离：使用数据的改变更简单，无需修改逻辑代码，只需要操作数据即可完成相关操作；virtualDOM：dom操作非常耗性能，不再使用原来的dom操作节点，大大解放了dom操作，但具体操作还是dom，只是换了一种方式；运行速度更快：与react相比，它还操作了virtualdom。在性能方面，vue有很大的优势。2、vue父组件是否传递数据给子组件？答：通过props3。子组件像父组件一样传递事件？答案：$emit方法4.v-show和v-if指令有什么异同？答：共同点：都可以控制元素的显示和隐藏；区别：实现方式不同，v-show的本质是将css中的显示设置为none，控制隐藏，只编译一次；v-if是动态的向DOM树添加或删除DOM元素。如果初始值为false，则不会编译。而且，v-if不断的销毁和创建会消耗更多的性能。总结：如果要频繁切换节点，使用v-show（切换开销比较小，初始开销比较大）。如果不需要频繁切换节点，使用v-if（初始渲染开销小，切换开销比较大）。5、如何让CSS只作用于当前组件？答：在组件中的style前面加上scoped6.有什么作用？答：keep-alive是Vue内置的组件，可以保持被包含的组件状态，或者避免重新渲染。7.如何获取dom？答案：ref="domName"用法：this.$refs.domName8.说出Vue中的几个命令及其用法？答：v-model双向数据绑定；v-for循环；v-ifv-show显示和隐藏；v-on事件；v-once：只绑定一次。什么是vue-loader？它的用途是什么？答：一个vue文件加载器，将template/js/style转换为js模块。用途：js可以写es6，style可以是scss或者更少，template可以加jade等。10.为什么要用key？答：需要用key为每个节点做一个唯一标识，Diff算法才能正确识别这个节点。主要功能是高效更新虚拟DOM。11.axios和安装？答：请求后台资源的模块。npminstallaxios--save安装好，在js中使用import，然后.get或.post。成功则返回在.then函数，失败则在.catch函数。12.v-modal的使用。答：v-model用于表单数据的双向绑定。其实就是一种语法糖。背后做了两个操作：v-bind绑定一个value属性；v-on命令将输入??事件绑定到当前元素。13.请说说vue.cli项目中src目录下的各个文件夹和文件的用途？答：assets文件夹是存放静态资源的；components用于组件；router用于定义路由相关的配置；app.vue是一个应用程序主组件；main.js是一个入口文件。14.分别简述computed和watch的使用场景。答：computed： 当一个属性被多个属性影响时，需要使用computed 。最典型的栗子：购物车商品结算时，watch： 当一条数据影响多条数据时，需要用到watch 栗子：搜索数据15、v-on可以监控多个方法吗？答：可以，栗子：。16、$nextTick的使用解答：当修改data的值后立即获取dom元素的值，是获取不到更新后的值的。需要使用$nextTick回调将修改后的数据值更新为dom元素获取后才能成功。17、为什么vue组件中的数据一定要是函数？答：由于JavaScript的特性，在一个组件中，数据必须以函数的形式存在，而不是对象。 构造中的数据写成一个函数，以函数返回值的形式定义数据，这样每次组件被复用时，都会返回一个新的数据，相当于每个组件实例都有自己私有的数据空间，它们只对自己维护的数据负责，不会造成混淆。并且简单的写成一个对象的形式，即所有的组件实例共享同一个数据，换一个就换所有。18.渐进式框架的理解答案：最少的要求；可根据不同需要选择不同级别；19.Vue中如何实现双向数据绑定？答：vue双向数据绑定是通过数据劫持结合发布订阅模式实现的，也就是说数据和视图是同步的，数据变了，视图变了，视图变了，数据也变了；core:关于VUE双向数据绑定的核心是Object.defineProperty()方法。20.单页应用和多页应用的区别和优缺点答：单页应用（SPA），通俗地说就是只有一个主页面的应用。浏览器必须在开始时加载所有必要的html、js和css。所有页面内容都包含在这个所谓的母版页中。但是写的时候还是会单独写（页面碎片），然后在交互时由路由程序动态加载，单个页面的页面跳转只刷新本地资源。多用于PC端。多页（MPA）意味着一个应用程序中有多个页面。页面跳转时，刷新整个页面。单页的优点：用户体验好，速度快，内容变化不需要重新加载整个页面。基于这一点，spa服务器的压力较小；前后端分离；页面效果会更炫酷（比如切换页面内容时的特殊动画）。单页缺点：不利于SEO；导航不可用，如果一定要导航，需要自己实现前进后退。（由于是单页无法使用浏览器的前进后退功能，需要自己搭建栈管理）；第一次加载需要很多时间；页面的复杂度增加了很多。21、v-if和v-for的优先级答：当v-if和v-for一起使用时，v-for的优先级高于v-if，也就是说v-if会在每个v中重复运行-for循环。因此，不建议同时使用v-if和v-for。如果v-if和v-for一起使用，vue中的会自动提示v-if应该放在外层。22、assets和static的区别答：相同点：assets和static都是存放静态资源文件。项目中需要的资源文件图片、字体图标、样式文件等都可以放在这两个文件下。这是一样的区别：assets中存放的静态资源文件是打包在项目中的，即运行npmrun构建时，assets中放置的静态资源文件会被打包上传。所谓简单打包，可以理解为压缩体积和代码格式化。压缩后的静态资源文件最终会放在静态文件中，和index.html一起上传到服务器。放在static中的静态资源文件不会经过打包、压缩、格式化等过程，而是直接进入打包后的目录，直接上传到服务器。因为避免了压缩，直接上传，打包的时候会提高效率。但是由于static中的资源文件没有被压缩，并且进行了其他操作，所以文件大小会比assets中的打包文件大。它将占用更多服务器空间。建议：项目中模板需要的所有样式文件、js文件等都可以放在assets中，走打包的流程。降低音量。项目中引入的第三方资源文件，如iconfoont.css，可以放在static中，因为这些导入的第三方文件已经处理过了，我们不再需要处理，直接上传即可。23、vue中常用的修饰符答：.stop：相当于JavaScript中的event.stopPropagation()，防止事件冒泡；.prevent：相当于JavaScript中的event.preventDefault()，阻止预设行为的执行（如果事件可以被取消，则在不停止事件进一步传播的情况下取消事件）；.capture：与事件冒泡的方向相反，事件捕获是从外到内；.self：只触发自身范围内的事件，不包括子元素；.once：只会被触发一次。24.vue答案的两个核心点：数据驱动，组件系统数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看成是完全由组件树组成的。25.vue和jQuery的区别答：jQuery使用选择器($)来选择DOM对象，并对其进行赋值、取值、事件绑定等操作。其实和原生HTML的区别在于可以更方便的选择和操作DOM对象，同时数据和界面在一起。比如需要获取label标签的内容：$("lable").val();，它还是依赖于DOM元素的值。Vue通过Vue对象将数据和View完全分离。不再需要引用相应的DOM对象来对数据进行操作。可以说数据和View是分离的，通过Vue对象的vm相互绑定。这就是传说中的MVVM。导入组件的步骤答：在模板中引入组件；在脚本的第一行导入路径；在组件中写入组件名称。27、delete和Vue.delete删除数组的区别答：delete只是把被删除的元素变成空/undefined，其他元素的键值不变。vue.delete直接删除数组，改变数组的键值。28、如何解决SPA首屏加载慢答：安装动态懒加载所需的插件；使用CDN资源。29、vue-router跳转和location.href有什么区别答：使用location.href='/url'跳转，简单方便，但是刷新页面；使用history.pushState('/url')，不刷新页面，静态跳转；引入router，然后使用router.push('/url')进行跳转，使用diff算法，实现按需加载，减少dom消耗。其实使用router跳转和使用history.pushState()没有区别，因为vue-router使用了history.pushState()，尤其是在history模式下。vue槽位解答：简单来说，如果父组件需要在子组件中放置一些DOM，那么槽位分布负责这些DOM是否显示，不显示，显示在哪里，如何显示。31、你的vue项目打包一个js文件，一个css文件，还是多个文件？答：根据vue-cli脚手架规范，一个js文件，一个css文件。32、Vue中的router-link在电脑上有用，在安卓上没反应，如何解决？答：安卓机上vue路由有问题，babel问题，安装babelpolypill插件解决。33.Vue2中router-link注册的事件无效。解决方案：使用@click.native。原因：router-link会屏蔽点击事件，.native是指直接监听一个native事件。34、IE和Firefox下RouterLink不工作的问题（路由不跳转）答：方法一：只用a标签，不用button标签；方法二：使用button标签和Router.navigate方法35.axios的特点答案是什么：从浏览器创建XMLHttpRequests；node.js创建http请求；支持PromiseAPI；拦截请求和响应；转换请求数据和响应数据；取消请求；自动用json替换它们。axios中发送字段的参数是data和params。两者的区别是params是和请求地址一起发送的，而data是作为请求体发送的。Params一般适用于get请求，data一般适用于postput请求。.36.请说说封装vue组件的过程？答：1、创建组件模板，先架设架子，写样式，考虑组件的基本逻辑。（os：1小时思考，10分钟编码，程序员的代码。） 2。准备组件的数据输入。即分析逻辑，确定props中的数据和类型。 3。准备组件的数据输出。即根据组件逻辑，准备要暴露的方法。 4。封装完成后直接调用就可以了37.params和query的区别答：用法：query要通过path传入，params要通过name传入，接收参数类似，都是this.$route.query.name和this.$route.params.name。url地址显示：query更类似于我们ajax中的get参数，params类似于post。简单来说，前者在浏览器地址栏显示参数，后者不显示。注意：queryrefresh不会丢失刷新query中的dataparams会丢失params中的数据。38.vue初始化页面闪烁问题答：在使用vue开发的时候，在vue初始化之前，由于div不是vue管理的，所以我们写的代码在解析之前会容易出现花屏的情况。看到类似的{{message}}的话，虽然这个时间通常很短，但是对于我们解决这个问题还是很有必要的。首先：添加[v-cloak]{display:none;}到css。如果问题没有完全解决，添加style="display:none;":style="{display:'block'}"到根元素39.vue更新数组时触发视图更新的方法答案：push();pop();shift();unshift();splice();sort();reverse()40.vue常用的UI组件库答：MintUI、element、VUX41.vue修改包后修改静态资源路径答：cli2版本：将config/index.js中assetsPublicPath的值改为'./'。build:{...assetsPublicPath:'./',...}cli3version:在根目录新建一个vue.config.js文件，然后添加如下内容：（如果已经有这个文件，修改它直接）模块。exports={publicPath:'',//相对于HTML页面(同目录)}生命周期函数面试题1、什么是vue生命周期？效果如何？答：每个Vue实例在创建时都会经过一系列的初始化过程——例如需要设置数据监听、编译模板、将实例挂载到DOM以及在数据变化时更新DOM等。同时，一些称为生命周期钩子的函数也会在这个过程中运行，这让用户有机会在不同的阶段添加自己的代码。（ps：lifecyclehooks是生命周期函数）比如你想通过一些插件来操作DOM节点，如果你想在页面渲染后弹出一个广告窗口，那么我们最早可以在mounted中做.2.哪些钩子会在第一个页面加载时被触发？答：beforeCreate、created、beforeMount、mounted3。简述每个周期适用于哪些场景。答：beforeCreate：新建一个Vue实例后，只有一些默认的生命周期钩子和默认事件，其他的还没有创建。beforeCreate生命周期执行时，data和methods中的数据还没有初始化。data中的数据和methods中create的方法在这个阶段是不能使用的：data和methods都已经初始化了。如果想调用methods中的方法或者操作data中的数据，最早可以在这个阶段操作beforeMount：这个hook执行的时候，模板已经编译到内存中，但是还没有挂载到页面上.这个时候页面还是挂载的：当这个钩子执行的时候，就说明Vue实例已经初始化完成了。.此时，组件离开创建阶段，进入运行阶段。如果我们想通过插件来操作页面上的DOM节点，最早可以在这个阶段执行beforeUpdate：执行这个hook时，页面显示的数据还是旧的，更新data中的数据，并且页面还是没有同步最新的数据Updated：页面显示的数据和data中的数据已经同步，都是最新的beforeDestory：Vue实例从运行阶段进入了销毁阶段。这时，所有的数据和方法、指令、过滤器……都处于活动状态。没有真正销毁销毁：此时所有的数据和方法、指令、过滤器……都处于不可用状态。组件已被销毁。4.created和mounted的区别答：created：在模板渲染成html之前调用，也就是通常会初始化一些属性值，然后渲染成view。mounted：模板渲染成html后调用，一般是初始化页面完成后调用，然后在html的dom节点上进行一些需要的操作。5、vue在哪个循环函数中获取数据？答：一般created/beforeMount/mounted都有。比如要操作DOM，就必须挂载。6、请详细说明一下你对vue生命周期的理解？答：一共有8个阶段：创建前/后、加载前/后、更新前/后、销毁前/后。创建前/创建后：在beforeCreated阶段，vue实例的挂载元素$el和**data对象**data都是undefined，还没有初始化。在created阶段，vue实例的data对象data有了，但是$el还没有。加载前/加载后：在beforeMount阶段，对vue实例的$el和data进行了初始化，但仍然是挂载前的虚拟dom节点，data.message没有被替换。mounted阶段，vue实例挂载，data.message渲染成功。Before/afterupdate：当数据发生变化时，会触发beforeUpdate和updated方法。销毁前/销毁后：执行destroy方法后，数据的变化不会触发周期函数，说明此时vue实例已经释放了对dom的事件监听和绑定，但dom结构仍然存在。vue路由面试题1.什么是mvvm框架？答：Vue是一个实现双向数据绑定的mvvm框架。当视图改变时，模型层更新，当模型层改变时，视图层更新。在Vue中，使用了双向绑定技术，即View的改变可以实时改变Model，Model的改变也可以实时更新到View。2.什么是vue-router？它有哪些成分？答：vue是用来写路由插件的。router-link,router-view3.active-class是哪个组件的属性？答：vue-router模块的router-link组件。children数组定义子路由4、vue-router的动态路由如何定义？如何获取传递的值？答：在router目录下的index.js文件中，在path属性中添加/:id。使用路由器对象的params.id。5.vue-router有哪几种导航钩子？答：三种，第一种：全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前判断拦截。第二种：组件中的hook第三种：单独路由独占组件6.$route和$router的区别答：$router是VueRouter的一个实例，如果要在script标签中导航到不同的URL，使用$router的.push方法。返回之前的历史，将$router.to(-1)$route作为当前的router跳转对象。在里面可以获取当前路由的名称、路径、query、parmas等。7、vue-router的两种模式答：hash模式：地址栏URL中的#符号；history模式：打印出window.history对象，可以看到里面提供的方法和记录长度。利用HTML5历史界面中新的pushState()和replaceState()方法。（需要特定的浏览器支持）。8、vue-router实现路由的懒加载（动态加载路由）答：三种方法第一种：vue异步组件技术====异步加载，vue-router配置路由，利用vue的异步组件技术，可以通过需要实现加载。但是，在这种情况下，组件会生成一个js文件。第二种：路由的懒加载（使用import）。第三种：webpack提供的require.ensure()，vue-router配置路由，利用webpack的require.ensure技术也可以实现按需加载。在这种情况下，指定相同chunkName的多个路由将被组合并打包到一个js文件中。vuex常见面试题1.什么是vuex？如何使用？哪些功能场景使用它？答：vue框架中的状态管理。在main.js中引入store和inject。新建目录store.js，.....export。场景包括：单页应用程序中组件之间的状态。音乐播放、登录状态、加入购物车2、vuex有哪些属性？答：一共有五种，分别是State、Getter、Mutation、Action、Modulestate=>基础数据（数据源存储）getters=>基础数据衍生的数据突变=>提交改变数据的方法，synchronize！actions=>就像一个装饰器，它包装了突变以使其异步。modules=>模块化的Vuex3.Vue.js中的ajax请求代码应该写在组件的methods中还是vuex的action中？答：如果请求的数据要被其他组件共享，只在请求的组件中使用，则不需要放到vuex的state中。
