web前端2022年常见面试题

1.实现深拷贝的方式

//1.使用lodash的clonedeep方法
//2.JSON.parse(JSON.stringify(data))

2.vue中的$nextick方法

延迟操作，将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。可以在created中，使用nextick完成操作dom的操作

3.计算属性和watch监听属性的区别

计算属性，首次运行执行，不可异步，用于简化表达式

watch，首次运行不执行，可异步，用户开销较大的操作，可以通过immediate属性设置页面加载的时候就监听，可以deep属性设置深度监听。

4.object.defineProperty和proxy的区别

defineProperty对于某些属性操作的时候，容易拦截不到，比如数组的下标操作，或者给对象新增属性，因此vue3中使用proxy从而实现了更好的监听。

5.data为什么是一个函数而不是一个对象

因为vue是单页面应用，如果多个组件共用一个对象，并且其中有组件对共用对象的数据作出修改，其他组件也会受到影响。用函数每次生成组件的时候，就会生成一个新的data，各自维护自己的数据。

6.如何理解ssr

ssr就是服务端渲染页面后，将html返回给客户端，优点是首屏加载更快，但是开发条件会受到影响，因为服务端只有beforeCareate和created两个钩子函数。

spa单页面应用，通过路由实现页面的动态渲染，不需要重新加载整个页面。优点：前后端分离，分工明确，对服务器压力小。

7.动态路由

通过param和query传参实现，query类似于get请求，携带的参数会在url中以?=id的方式呈现，param类似于post请求。