vue前端简答题

1.css只在当前组件起作用

答：在style标签中写入 scoped 即可 例如：

2.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3.$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.vue.js的两个核心是什么？

答：数据驱动、组件系统

5.vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？

答：可以

8.vue中 key 值的作用？

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

9.什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

11.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

12.vue插槽的理解

答：vue插槽有三种，具名插槽，匿名插槽，作用域插槽

通过插槽可以动态指定某一组件模块部分的渲染，我们在调用组件的时候，在组件的标签中传递了什么样的标签结构，就会在插槽中渲染什么样的标签结构

vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种：

注意：

然后在webpack.prod.conf.js里面添加：

在webpack.prod.conf.js的plugins里面添加：

最后在main.js里面修改：

安装：

在main.js引入：

在vue页面中配置：

还不了解vue为什么不被百度收录或预渲染怎么使用的童鞋们建议点下面链接了解下

vue项目不被百度收录怎么办、seo优化问题/预渲染的具体使用

Nuxt.js介绍、Nuxt.js 是什么？：

Nuxt.js安装

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

或者用yarn ：

然后会让你进行一些安装的选择，这里就简单说下（UI框架没有就选none就行了，Eslint检测本人是非常不习惯用的所以我一般都不选，其他的没什么说的）

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

应用现在运行在 http://localhost:3000 上运行。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_ 和 ~/static/your_方式。

说下路由配置问题：

总结

每个框架都有他自己对应的ssr方案，今天这里提到了vue的，有心的童鞋可以自行查阅其他框架方面的

再说几点关于seo方面的小技巧

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！

文章对您有所帮助请给作者点个赞支持下，谢谢~

---