Vue 面试题整理-2020 （2）

1、swiper 插件从后台获取数据没有问题，css 代码啥的也没有问题，但是图片没动，怎么解决.。
　　主要是因为 swiper 提前初始化了 ，但是数据还没有完全出来。
　　this.$nextTick() 主要作用就是等数据改变引发 DOM 重新渲染完成之后才会执行。
2、keep-alive
　　当在这些组件之间切换的时候，想保持这么组建的状态，以避免反复渲染导致的性能问题
　　原理：在 created 的时候，将需要缓存的虚拟 DOM 节点放到 cache 中，在 reader 的时候根据 name 再进行取出。
　　路由懒加载：
　　　　就是当你需要的时候才会加载，按需加载。
　　　　单页面应用的问题就是所有的页面都需要引入一个 js 文件，wepback 打包的时候生成一个 js ，这个 js 会再所有组件切换的时候调用
　　　　单页引入了所有的一个 js ，日志也会引入所有的一个 js ，这样首页加载速度变慢。解决方法就是路由懒加载。
3、单页应用
　　原理就是通过检测地址栏的变化将对应路由组件进行组件之间的切换。
　　一个项目只有一个完整的 html 页面，其他部分都是 html 组件组成，页面的跳转只是局部的刷新，不会重新加载全部的资源，组件之间的之间的切换快，比较容易实现转场动画。页面每次跳转时候，并不需要做 html 文件请求，这样就节约了很多 http 发送请求，我们的切换页面的时候，速度会很快。
　　优点：良好的交互体验、良好的前后端工作分离模式、减轻服务器的压力、公用一套后端程序代码
　　缺点：SEO 难度较大、页面上不能进行前进后退管理、初次加载耗时多。
4、什么是vue-loader？
　　vue-loder 就是一个加载器，把 vue 组件转换成 js 模式。
　　为什么要转译此模块？
　　　　可以动态的渲染一些数据，对三个标签做了优化
　　　　template 写虚拟 DOM
　　　　script 写 es6 语法
　　　　style 默认可以用 scss 语法，提供了作用域
　　　　并且开发阶段提供了热加载器
5、slot 是什么？如何使用？
　　插槽：具名插槽、匿名插槽、作用域插槽
　　在引用子组件开始标签和结束标签之间，插入一个任意一个元素，用 slot 标签包裹一下，在父组件调用子组件的时候，这个插槽就会插入到子组件对应的具名插槽的位置。slot 有一个 name 属性，加 name 属性就是具名插槽，不加就是匿名插槽。
6、什么是虚拟 DOM ？与 key 值得关系？
　　DOM 是用 js 对象记录一个 dom 节点得副本，当 dom 发生更改的时候，先用虚拟 dom 进行 diff 算法，算出最小差异，然后再修改真实 dom。
　　当用传统得方式操作 DOM 得时候，浏览器会从构建 DOM 树开始从头到尾执行一边流程，效率很低，而虚拟 DOM 是用 javascrit 对象表示的，而操作 javascriot 是很简便高效的。虚拟 dom 和真实的 dom 有一层映射关系，很多需要操作 dom 的地方都会去操作虚拟 dom ，最后一次更新 dom，因而可以提高性能。
　　虚拟 dom 的缺点：
　　1、代码更多，体积更大
　　2、内存占用增大
　　3、小量的单一的 DOM 修改使用 虚拟 DOM 成本反而更高，不如直接修改真实 dom 快
7、如何理解 vue 的 mvvm 框架？
　　是一种简化用户界面的事件驱动编程方程式。
　　view 层是视图层，使用户交互层，主要是 HTML 和 CSS 来构建
　　moedl 层数据模型层，泛指后端进行的各种逻辑处理和数据操控
　　viewmodel 层是指视图数据层。在这一层，前端开发者对从后端获取的 model 数据进行转换处理，做二次封装，以生成符合 view 层使用预期的视图数据模型。
　　数据双向绑定：
　　　　当视图改变更新模型层，当模型层改变更新视图
　　vue 的数据双向绑定：
　　　　vue 采用数据劫持&订阅者发布模式的方法：vue 在创建 vm 的时候，会将数配置在实例中，然后会使用 object.defineproperty 对这些数据进行处理，并且会将数据进行处理，并且会为这些数据添加 getter 与 setter 方法，当数据改变之后，就会触发数据的 setter 方法，从而触发 vm 的 watcher 方法，然后数据改变了， vm 进一步渲染 view 视图。
8、active-class 是哪个组件的属性。
　　vue-router 模块提供的 router-link 组件的属性
　　在 vue-router 中要使用 active-class 有两种方式
　　　　1、直接在路由 js 文件中配置 linkActiveClass
　　　　2、在 router-link 中写入 active-class
9、scss 是什么？
　　scss 是一种预编译器。
10、vue 的第三方插件：
　　miui-ui element-ui vuex
11、axios 是什么？
　　axios 是用来发送请求的。get 和 post 两种
　　get：通过定义一个 get 函数，他有两个参数，第一个参数就表示我们请求的 url 地址，第二个参数就是我们要携带的请求参数，get 函数返回的是一个 promise 对象，当axios 请求成功的时候服务器返回给我们的是 reslove 返回值，请求错误的时候返回给我们的是 reject 错误值，最后通过 export 抛出 get 函数
　　post：方法基本与 get 方法一致，但是需要设置请求头。
12、promise 的了解
　　promise 是异步函数的解决方案，从语法上讲 promise 是一个对象，从他可以获取异步操作的消息， promise 有三个状态，pending 等待状态、fulfilled 成功状态、rejected 失败状态，状态一旦更改，就不会在变，创造出 promise 实例后，他会立刻执行，promise 有两个API 方法：resolve 和 reject，resolve 代表的是回调成功后的函数，reject 代表的是失败后返回的结果，原型上有两个放法：.then 和 .catch 方法，例如请求接口 .then 拿到的是数据，通过 .catch 捕获错误异常
13、自定义指令的方法：
　　vue.directive
　　钩子：bind、inserted、update、unbind
　　参数：el、binding、vnode
14、vue 之间的通信
　　父子：子组件用 props，接受父组件传递过来的值
　　子父：父组件生命一条数据，再写一个改变自身的方法，传递给子组件，然后把子组件添加到点击事件上
　　兄弟之间传值：
　　　　ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值even.bus事件总线：简单的场景下，使用一个空的VUE实例作为事件总线，可以实现兄弟之间的通信。\ast \ast 15、异步函数\ast \ast asyncawaitasync函数的返回值是一个Promise对象。当这个async函数返回一个值时，Promise的resolve方法会负责传递这个值（相当于Promise.resolve(value)）；当async函数抛出异常时，Promise的reject方法也会传递这个异常值（相当于Promise.reject(value)）。async函数中可能会有await表达式，await表达式会暂停当前asyncfunction的执行，等待Promise处理完成。若Promise正常处理(fulfilled)，其处理结果作为await表达式的值，继续执行asyncfunction\ast \ast 16、VUE路由之间的传值\ast \ast 使用$router.push 拼接参数传参
　　使用name来确定匹配的路由，通过params来传递参数
　　使用path来匹配路由，然后通过query来传递参数
17、模块化开发
　　一个模块就是实现特定功能的文件
好处：
　　　　1、避免了变量污染，命名冲突
　　　　2、提高代码复用率
　　　　3、提高维护性
　　　　4、依赖关系的管理
18、vue 的计算属性
　　在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采用计算属性的方法
好处
　　　　1、是数据处理结构清晰
　　　　2、依赖于数据，数据更新，处理结果自动更新，
　　　　3、计算属性内部 this 指向vm实例
　　　　4、在 template 调用时，直接写计算属性姓名即可
　　　　5、常用的是 getter 方法，获取数据，也可以使用 set方法改变数据，
　　　　6、相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候conputed从缓存中获取，不会重新计算，