Vue的一些常见的面试题（下）

16、Vue.js的特点
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入

17、插槽的理解
插槽用于决定将所携带的内容，插入到子组件指定的某个位置，但内容必须在父组件中子组件的标签内定义，在子组件中用标签接收。slot是组件内部的占位符。

18、vue-router有哪几种导航钩子
① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；
beforeEach（）每次路由进入之前执行的函数。
afterEach（）每次路由进入之后执行的函数。
beforeResolve（）2.5新增
② 单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。
beforeEnter（）
beforeLeave（）
③ 组件路由钩子：
beforeRouteEnter（）
beforeRouteLeave（）
beforeRouteUpdate（）

19、vue组件中的data为什么是一个函数
data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了。

20、路由懒加载
使用原因：在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
原理：vue异步组件技术：异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 实现按需加载。

① 第一种：
component:(resolve) => {
require(["@/components/HelloWorld"],resolve);
}
② 第二种：
const info = () => import("@/components/info");
③ 第三种：
const info = (resolve) => {
import("@/components/info").then(modul => {
resolve(modul);
})
}
④ 第四种：
const info = r => require.ensure([],() => r(
require("@/components/info")
),“info”);

21、Vue.js介绍
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。数据驱动+组件化的前端开发。通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

22、scoped原理及穿透方法
vue中的scoped通过在DOM结构以及css样式上加唯一不重复的标记：data-v-hash的方式，以保证唯一(通过PostCSS转译)，达到样式私有模块化的目的。
scoped的3条渲染规则：
① 给HTML的DOM节点加一个不重复的data属性，来表示它的唯一性；
② 在每句css选择器末尾（编译后的生成的css语句）加一个当前组件的data属性选择器来私有化样式；
③ 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上ddan当前组件的data属性。
补充：

  在做项目中，会遇到这么一个问题，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢？
①不使用scopeds省略（不推荐）；
② 在模板中使用两次style标签。
③scoped穿透：/deep/ >>>

PostCSS：使用JS插件转换CSS的工具。这些插件可以支持变量和mixins，转换将来的css语法，内联图像等。Autoprefixer是一种非常流行的PostCSS插件。

23、请说出vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件

24、Vue中key值的作用
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟DOM。

25、Vue怎么重置data
使用Object.assign()，vm. d a t a 可 以 获 取 当 前 状 态 下 的 d a t a ， v m . data可以获取当前状态下的data，vm. data可以获取当前状态下的data，vm.options.data可以获取到组件初始化状态下的data。

Object.assign(this. d a t a , t h i s . data, this. data,this.options.data())复制代码

26、组件中写name选项有什么作用
①项目使用keep-alive时，可搭配组件的name进行缓存过滤。
②DOM做递归组件时需要调用自身name
③vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

27、route和router
route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

28、Vue和React的区别
监听数据变化的实现原理不同：Vue 通过 getter/setter 以及一些函数的劫持，能精确快速的计算出 vdom 的差异。这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。React 默认是通过比较引用的方式进行的，如果不优化，每当应用的状态被改变时，全部子组件都会重新渲染，可能导致大量不必要的 VDOM 的重新渲染。
数据流的不同：Vue 中默认支持双向绑定，组件与 DOM 之间可以通过 v-model 双向绑定。但是，父子组件之间，props 在 2.x 版本是单向数据流。React 一直提倡的是单向数据流。
模板渲染方式的不同：React 是通过 JSX 渲染模板，而 Vue 是通过一种拓展的 HTML 语法进行渲染

29、首屏加载优化
①把不常改变的库放到index.html中，通过cdn引入

然后找到 build/webpack.base.conf.js 文件，在 module.exports = { } 中添加以下代码：

externals: {
‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘element-ui’: ‘ELEMENT’,
},复制代码
②vue路由懒加载

③不生成map文件，找到config/index.js文件，修改为productionSourcceMap：false

④vue组件尽量不要全局引入

⑤使用更轻量级的工具库

⑥开启gzip压缩：这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

⑦首页单独做服务端渲染：如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。

30、vue-cli替我们做了哪些工作
vue-cli是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。

vue-cli完成的功能：

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

31、vue的指令
⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析html标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在DOM内添加或删除DOM元素

⑻v-else：条件渲染指令，必须跟v-if成对使用

⑼v-else-if：判断多层条件，必须跟v-if成对使用

⑽v-cloak：解决插值闪烁问题

⑾v-once：只渲染元素或组件一次

⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

32、v-for 与 v-if 的优先级
v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

33、axios的拦截
//响应拦截
axios.interceptors.response.use(function(response){
//对响应数据做点什么
return response.data
},function(error){
//对错误响应做点什么
return Promise.reject(error)
})
//请求拦截
axios.interceptors.request.use(function(config){
//在发送请求之前做些什么
return config
},function(error){
//对请求错误做些什么
return Promise.reject(error)
})
34、vue怎么兼容IE
使用babel-polyfill插件

35、$set是干嘛用的

<·h1>{{arr}}</h1·>
<button @click=“change()”>点击

上面就是一个典型的例子，当我们点击按钮想要根据数组arr的下标改变其元素的时候，你会发现data中的数据改变了，但是页面中的数据并没有改变。这时候就需要$set出场了。

change(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 21: …his.list,1,0); }̲复制代码 改变/添加 对象属性…set(data实例,“属性名(添加的属性名)”,“属性值(添加的属性值)”)
改变/添加 数组属性的时候:this.$set(data实例,数组下标,“改变后的元素(添加的元素)”)
原因：
vue在创建实例的时候把data深度遍历所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。让 Vue 追踪依赖，在属性被访问和修改时通知变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

当你在对象上新加了一个属性newProperty,当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的),vue.$set是能让vue知道你添加了属性, 它会给你做处理。