前端面试题（四）--高频面试题

第四天

1、详述组建通信？

答：从上到下--父传子

在父组件的组件标签上通过v-bond绑定要传递的数据，然后在子组件内部通过props接收

// 父组件<select-list :dataList="dataArr" @parentReceive="changeVal"/>// 子组件props: ['dataList']

从下到上--子传父

在父组件的子组件标签上通过@自定义事件名称监听，然后通过回调函数去处理响应的逻辑

// 父组件 <template>

<select-list :dataList="dataArr" @parentReceive="changeVal"/>

</template>

<script>

changeVal (val) {

console.log(`我是子组件传递过来的数据${val}`)

}

</script>

在子组件中定义方法，然后在方法里面通过 this.$emit 进行传递($emit有两个参数(自定义事件名称，要传递的数据))；

// select-list组件 - 子组件selectVal (val) {

// 第一步 this.$emit('parentReceive', val) // 第一个参数：自定义事件名称；第二个参数要传递的数据}

2、keep-alive组件的作用？

答：keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，

两个作用：include：字符串或者正则表达式。只有匹配的组件会被缓存

exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。

3、单页面应用和多页面应用区别及优缺点？

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1.用户的体验好，快，内容的改变不需要重新加载整个页面，由于这点，SPA它对服务器的压力小

2前后端分离

3.页面效果比较炫酷

单页面的缺点：

1.不利于seo优化

2.导航不可用

3.初次加载时耗时多

4.页面的复杂程度提高了很多

多页面开发的优缺点；

　　　　优点：多个页面之间跳转，用户可以清晰的了解整个网站的内容构成；页面结构的分布也不会很拥挤；实现简单，开发成本低；适用于对搜索引擎支持较高，页面跳转较少，数据传递较少的项目中开发。

　　　　缺点：页面跳转时，要重新执行css，js等文件，页面片段之间跳转较慢，需要用到页面跨页面传值的几种方法；实现转场动画比较困难。维护成本高。

4、什么是计算属性？什么情况适用？

答：computed 是vue实例中的计算属性

computed是实时响应的，要根据data里一个值随时变化做出一些处理时，就需要用conputed去实时计算

当我们需要一个值或者一个数据，而这个数据需要通过一些逻辑运算才能得到的时候，我们更希望将它放在计算属性内，这样的话我们可以将整个项目对于数据的复杂运算逻辑全部集中管理在计算属性内

5、computed、methods的区别？

答： computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()

computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

methods在重新渲染的时候，函数总会重新调用执行。