vue常见面试题总结大全(下)
28. vue双向绑定原理
VUE实现双向数据绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的， Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
29. vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单的说吧，我是这么认为的：Vuex 就是前端为了方便数据的操作而建立的一个” 前端数据库“。
30. vue组件组件之间传参（父传子，子传父）
父组件向子组件传值：
（1）子组件在props中创建一个属性，用来接收父组件传过来的值；
（2）在父组件中注册子组件；
（3）在子组件标签中添加子组件props中创建的属性；
（4）把需要传给子组件的值赋给该属性
子组件向父组件传值：
（1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
（2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
（3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
31. Vue路由钩子
说到路由，不得不说的就是路由钩子，他其实就是路由的各种状态的回调函数，跟页面的生命周期有点相似，主要用在登陆拦截，token，sessionstory等的拦截，从而跳转到login
router.beforeEach可以注册一个全局的路由钩子,它有三个参数
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
确保要调用next 方法，否则钩子就不会被 resolved。
32. 用vue过程中遇到什么BUG？
症结1：删除的过滤器仍被引用
BUG： vue.min.js:7 Uncaught TypeError: Cannot read property 'read' of undefined
症结2：无法找到待加载的页面
BUG： vue.min.js:6 Uncaught TypeError: Cannot set property '__vue__' of undefined
症结3：v-for="10"，正确写法v-for="p in 10"
BUG： vue.min.js:7 Uncaught TypeError: Cannot read property 'create' of undefined
33. 导航跳转的方式有哪些？
（1）router link to 跳转下一个页面
（2）$router.push（要跳转的路径）
（3）$router.replace(要跳转的路径)，没有历史记录
（4）$router.go（前进或后退，数字类型）Window下history对象go
34. 递归是什么?
答：自己调用自己，直到满足退出条件。
35. 递归用在什么地方？怎么用？
答：递":传递，“归”：回归。
简单的解释：方法内调用它本身。
传递和回归必须存在一个临界点：比如最内层被调用的方法内给了一个返回值，或者是最内存被调用方法结束，然后将结果返回给上一层的方法.,然后一层层结束，一层层返回。
它的使用场景，比如会用递归来解决斐波那契数列、阶乘。。的问题。
36. Vue中的递归怎么用？用在哪？
答：组件中需要组件调用自身，这就是递归组件，递归组件需要声明name和自己引入自己并声明注册为组件，并且需要使用props进行传参，其还需要一个停止条件，否则会进入死循环。
vue的递归组件和其v-for指令之间的关系和js中的for循环和递归函数一样，一个是有尽头，一个是不知道到底嵌套了多少层级。在vue中我们是数据驱动界面，根据数据来渲染界面，而很多数据我们是从后台获取，事先并不知道它会嵌套多少层，这时候使用v-for指令就不能满足我们的要求了，需要使用递归组件，和js中的递归函数一个道理!
37. 对vue的理解？
vue对比angular
（1）vue在设计之初参考了很多angularjs的思想s
（2）vue相对比与angular比较简单
（3）vue相对比与angular比较小巧，运行速度快
（4）vue与angular数据绑定都可以用｛｛｝｝
（5）vue指令用v－xxx angularjs用ng－xxx
（6）vue数据放在data对象里面，angular数据绑定到$scope对象上
vue对比react
（1）vue与react都使用 virtual DOM
（2）vue与react都提供了组件化的视图组件
（3）vue与react将注意力集中保持在核心库，有丰富的插件库
（4）react使用jsx渲染页面，vue使用更简单的模版
（5）vue比react运行速度更快
计算属性放在computed:{//函数} 效率高 methods设置效率低。
38. scss是什么？安装使用的步骤是？有哪几大特性？
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader
有哪几大特性:
（1）可以用变量，例如（$变量名称=值）；
（2）可以用混合器，例如（）
（3）可以嵌套
39. mint-ui是什么？怎么使用？说出至少三个组件使用方法？
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper
40. axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
41. $route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
42. Vue的路由实现：hash模式 和 history模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
43. 自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
44. vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
45. 请说下封装vue组件的过程？
答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
46. vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
47. 请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
48. vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用， 问题有：smithButton命名，使用的时候则smith-button。
49. 聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
50. vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
