前端面试基础面试题——3

1.组件的设计原则

2. 请问 v-if 和 v-show 有什么区别

3.vue 事件中如何使用 event 对象？

4.v-for 与 v-if 的优先级

5.vue 中子组件调用父组件的方法

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

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

 8.route和router的区别

9. 响应式系统的基本原理

10. vue slot是做什么的?

---

1.组件的设计原则

(1)页面上每个独立的可视/可交互区域视为一个组件(比如页面的头部，尾部，可复用的区块)
(2)每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护(组件的就近维护思想体现了前端的工程化思想，为前端开发提供了很好的分治策略，在vue.js中，通过.vue文件将组件依赖的模板，js，样式写在一个文件中)
(每个开发者清楚开发维护的功能单元，它的代码必然存在在对应的组件目录中，在该目录下，可以找到功能单元所有的内部逻辑)
(3)页面不过是组件的容器，组件可以嵌套自由组合成完整的页面

2. 请问 v-if 和 v-show 有什么区别

 v-show 指令是通过修改元素的 display 的 CSS 属性让其显示或者隐藏

v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

3.vue 事件中如何使用 event 对象？

v-on 指令（可以简写为 @）

1、使用不带圆括号的形式，event 对象将被自动当做实参传入；

2、使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。

4.v-for 与 v-if 的优先级

1、v-for优先于v-if被解析； 2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能； 3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环； 4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项； 

5.vue 中子组件调用父组件的方法

第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法

第二种方法是在子组件里用$emit 向父组件触发一个事件，父组件监听这个事件就行了

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

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

优点： 1、用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。 2、前后端职责业分离（前端负责view，后端负责model），架构清晰 3、减轻服务器的压力

缺点： 1、SEO（搜索引擎优化）难度高 2、初次加载页面更耗时 3、前进、后退、地址栏等，需要程序进行管理，所以会大大提高页面的复杂性和逻辑的难度

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

先来看一下计算属性的定义： 当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。 计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。

 8.route和router的区别

$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数。

而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等

9. 响应式系统的基本原理

vue响应式的原理，首先对象传入vue实例作为data对象时，首先被vue遍历所有属性，调用Object.defineProperty设置为getter和setter，每个组件都有一个watcher对象，在组件渲染的过程中，把相关的数据都注册成依赖，当数据发生setter变化时，会通知watcehr，从而更新相关联的组件

10. vue slot是做什么的?

插槽、主要是让组件的可扩展性更强，简单点说就是，能够在组件内写其他内容