常见的几个面试题

一面

1.单页面应用和多页面应用的优缺点？

单页应用

优点：页面切换快

因为页面每次切换跳转时，并不需要做html文件的请求，这样就减少了http发送

缺点：首屏时间慢，SEO差

因为首屏时需要请求html，同时还要发送js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。

SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容

多页应用

优点：首屏时间快

因为当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

搜索引擎优化效果好

搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。

缺点：页面切换慢

因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

2.computed与watch的区别

1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
5、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框

3.v-for和v-if的优先级
        原因：v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if，造成不必要的计算，影响性能，尤其是当前需要渲染很小一部分的时候。

        总结:v-for比v-if优先级高，一起使用会浪费性能，不建议同时使用，如果必要的情况下，可以选择使用computed过滤掉不需要显示的项目。

v-for和v-if一起使用的正确方法

对于第二种情况，将v-if放到循环列表元素的父元素中或使用template将v-for渲染的元素包起来，再在template上使用v-if。

<template v-if="shouldShowItem">
    <div v-for="item in itemList"></div>
</template>
————————————————
版权声明：本文为CSDN博主「马可仕马可仕」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43554584/article/details/111462519

4.LocalStorage / SessionStorage

localstorage通过调用window.localStorage获得，sessionStorage通过window.sessionStorage获得。两种storage存储具有相同的方法，都保存在客户端，不与服务端进行交互。

setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value

localStorage.setItem("name","john"); //设置name为john

localStorage.setItem("name","john1"); //覆盖之前的值，现在name所对应的值是john1

getItem(“key”)：获取名称为key的值，如果key不存在则返回null**

removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除

clear()：清空localStorage中所有信息

key()：键的索引

============

JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理

var str = localStorage.getItem("data1");

var obj = JSON.parse(str);

console.log(obj);

============

localStorage创建存储数据后，除非手动删除数据，不然都会一直存储在浏览器中
sessionStorage创建存储数据后，页面刷新、同源打开其他页面，代码跳转能够访问到当前的seesionStorage。如果关闭浏览器，sessionStorage就会消失。实际上我们可以理解成一种会话机制。

localStorage主要用于存储适合长期保存的数据，如token，搜索记录等等。
seesionStorage用于存储用户的敏感信息，只在当前会话中保存。如用户名等等。

5.v-if和v-show的区别

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

• 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；

• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

• 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

6. Vue的性能优化有哪些

（1）编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher

• v-if和v-for不能连用

• 如果需要使用v-for给每项元素绑定事件时使用事件代理

• SPA 页面采用keep-alive缓存组件

• 在更多的情况下，使用v-if替代v-show

• key保证唯一

• 使用路由懒加载、异步组件

• 防抖、节流

• 第三方模块按需导入

• 长列表滚动到可视区域动态加载

• 图片懒加载

（2）SEO优化

• 预渲染

• 服务端渲染SSR

（3）打包优化

• 压缩代码

• Tree Shaking/Scope Hoisting

• 使用cdn加载第三方模块

• 多线程打包happypack

• splitChunks抽离公共文件

• sourceMap优化

（4）用户体验

• 骨架屏

• PWA

• 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等.

7.组件通信

1.props / $emit

        父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

2.子组件向父组件传值        

• $emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

3.eventBus事件总线（$emit / $on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信

4.依赖注入（project / inject）

这种方式就是Vue中的依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。

5.ref / $refs

这种方式也是实现父子组件之间的通信。

ref： 这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

6. $parent / $children

• 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）

• 使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

7.$attrs / $listeners

针对上述情况，Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

先来看一下inheritAttrs，它的默认值true，继承所有的父组件属性除props之外的所有属性；inheritAttrs：false 只继承class属性 。

• $attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上

• $listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

（6）总结

（1）父子组件间通信

• 子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。

• 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。

• 使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

（2）兄弟组件间通信

• 使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。

• 通过 $parent/$refs 来获取到兄弟组件，也可以进行通信。

（3）任意组件之间

• 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

8.路由跳转

1. router-link 【实现跳转最简单的方法】
       <router-link to="需要跳转到的页面路径">

别忘记给需要跳转的路径在需要提前在router/index.js下引入

2.this.$router.push({ path:’/user’})

        常用于路由传参，用法同第三种

        1）、query引入方式

                params只能用name来引入路由

                而query 要用path引入

        2）、query传递方式

                类似于我们ajax中get传参，在浏览器地址栏中显示参数

                params则类似于post，在浏览器地址栏中不显示参数

3.this.$router.replace{path：‘/’ }类似，不再赘述