Vue面试题

Vue面试题：

1.vue2及vue3的原理：

vue2：用Object.defineProperty()对数据进行劫持，通过getter和setter进行查看和数据的修改，通过发布和订阅者模式进行数据和视图的响应式。

vue3：通过Proxy拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。通过reflect对源对象的属性进行操作

2.vue2的生命周期：

beforeCreated,created,beforeMounted,mounted,beforeUpdated,updated,beforeDestory,destory

3.computed和watch的区别：

computed是计算属性，不支持异步，支持缓存

watch是监听属性，支持异步，不支持缓存

4.nextTick是什么：

下次Dom更新循环结束之后执行延迟回调

5.v-if和v-for不能一起使用的原因：

v-for的优先级比v-if高，一起使用会造成性能浪费

可以把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次

v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for

6.v-if和v-show的区别在于：

v-if是整个元素的添加和删除，v-show是整个元素的显示和隐藏

如果要非常频繁的切换，则使用v-show较好

如果在运行时条件很少改变，则使用v-if较好

7.Vue.use()是用来安装插件的

Vue.use()是官方提供给开发者的一个api，用来注册、安装类似vuex、vue-router、ElementUI之类的插件的

8.什么是跨域：

跨域问题是浏览器同源策略所导致的，

其中协议、域名、端口号相同，称之为同源，如果不同称之为跨域或跨源。

跨域常用解决方案：代理、CORS、JSONP

9.什么是cookie：

是存储在用户本地终端上的数据，是网站为了识别用户和跟踪对话而存储在用户本地终端中的文本数据。

10.keep-alive是什么：主要功能是缓存组件，提升性能

keep-alive使用场景：可以减少网络请求，如果当前组件数据量比较大，就可以减少网络请求，提升用户体验

如果详情页面之间进行切换，就可以使用keep-alive进行缓存组件，防止同样的数据请求

11.keep-alive缓存后如何获取数据：

beforeRouteEnter    /  actived

12.ref作用：

放到dom节点上，获取原生dom

放到组件身上，获取组件实例，可以获取组件内部所有的方法和数据

13.scoped原理是什么：

作用：使样式私有化（模块化），不对全局造成污染

原理：动态的给组件加上一个hash值，用属性选择器去匹配

14.$router和$route

$router：是一个全局路由对象，是new Router的实例，用于进行路由跳转等操作。

$route：是一个局部对象，表示当前正在跳转的路由对象。当前的路由信息对象，获取到路由参数、路径

15.发布订阅模式和观察者模式

     发布订阅模式：

         发布者（也称为消息生产者）负责创建和管理消息

         订阅者（也称为消息消费者）注册他们对特定消息的兴趣，以便接收这些消息

         消息代理（如调度中心或中间件）维护订阅者和发布者之间的连接，确保消息能够正确传递给感兴趣的订阅者。

         这种模式通常在异步环境中使用，以提高性能和减少耦合性。

     观察者模式：

          观察者（也称为Observer）被动地等待被通知，通常是当目标对象的状态发生变化时。

          目标对象（也称为Subject）负责维护观察者列表，并在状态变化时通知所有相关的观察者。

          这种模式通常用于需要实时响应的场景，如日志记录或事件处理。

总的来说，发布订阅模式强调的是发布者和订阅者之间的解耦，以及通过消息代理实现的异步通信，而观察者模式则是围绕目标对象和其观察者之间的紧密解耦关系构建的。发布订阅模式可以看作是观察者模式的一种优化和扩展，它在一些情况下提供了更高的灵活性和可扩展性。

16.v-model与.sync

相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

区别点：

v-model只能用一次；.sync可以有多个

17.如何做样式穿透

背景：修改当前组件嵌套的子组件内部的样式

问题：

  1.如果不添加scoped，可能影响全局样式

  2.如果添加scoped，嵌套的子组件内部样式不能生效

如何解决：添加/deep/  /  ::v-deep

scss：使用::v-deep

less：使用/deep/

你对SPA单页面的理解，它的优缺点分别是什么？

SPA仅在Web页面初始化时加载相应的HTML、Javascript和CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。

单页应用优缺点：

优点：

具有桌面应用的即时性、网站的可移植性和可访问性

用户体验好、快，内容的改变不需要重新加载整个页面，SPA相对服务器压力小

良好的前后端分离，分工更明确。

怎么理解Vue的单向数据流：

1.单向数据流是指数据从父组件传向子组件，子组件没有权限直接修改该数据

2.子组件需要在data或者computed中重新定义变量来接收父组件传来的值，以便修改

3.子组件可以通过$emit的方式通知父组件修改值，再重新传回给子组件

如何理解vue的key属性：

key是为Vue中vnode的唯一标记，通过这个key，我们的diff操作可以更准确、更快速，以便高效的更新虚拟DOM