2024-vue相关面试题

未更新完…

1. vue2和vue3的区别

• 性能方面：Vue3在内部进行了大量的优化，使得渲染速度更快，性能更好，内存占用更少；比如，Vue3使用了Proxy替代Object.defineProperty实现响应式（ Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升）；
• 编码方式：vue3使用的是“组合式API”，可以更好地组织和复用逻辑代码，提高代码的可维护性；vue2使用的是“选项式API”，即数据放在data中，方法放在methods中，而Vue3则允许将一个功能的所有代码放到一起；
• 对TypeScript的支持：Vue3对TypeScript的支持更加友好，提供了完整的类型定义；
• 模板根元素：vue3可以没有根元素，vue2必须要有一个根元素。

2. vue的传参方式以及优缺点

• Vuex：包含五个核心属性：‌state、‌getters、‌mutations、‌actions和modules。‌
  • state：保存共有数据，响应式；
  • getter：可以对state进行计算操作，主要庸才过滤一些数据，可以在多组件之间复用；
  • mutations：可以动态修改state中的数据，通过commit提交方法(同步);
  • actions：将mutations里处理数据的方法变成异步；
  • modules：模块化vuex。
  • 优点：解决了多层组件之间繁琐的事件传播；解决了多组件依赖统同一状态的问题；单向数据流。
  • 缺点：不能做数据持久化，刷新页面就要重制，要做数据持久化可以考虑使用localstorage或者下载插件；增加额外的代码体积，简单的业务场景不建议使用。
• EventBus： 通过共享一个vue实例，使用该实例的$ on以及$emit实现数据传递。
  • 优点：解决了多层组件之间繁琐的事件传播；使用原理十分简单，代码量少。
  • 缺点：由于是都使用一个Vue实例，所以容易出现重复触发。
• 父子之间的传参：
  • 父传子：父组件在子组件标签中绑定自定义属性；子组件通过props:[‘’]接收。
  • 子传父：父组件在子组件标签中绑定自定义事件；子组件通过this.$emit(‘自定义事件名称’,‘发送的数据’)方法触发自定义事件，传值给父组件。
  • 缺点：单一组件层级一深需要逐层传递，会有很多不必要的代码量；不能解决多组件依赖统同一状态的问题。
• ref:组件绑定ref属性，通过refs获取组件内部进行传参。
• 插槽slot：
  • 具名插槽：子组件用name属性来表示插槽的名字，不传为默认插槽；父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值。
  • 默认插槽：子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面；父组件在使用的时候，直接在子组件的标签内写入内容即可。
  • 作用域插槽：子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上；父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用。
  • 优点：复用性好,适合做组件开发。
  • 缺点：和props一样不支持跨层级传递。
• $parent $children
  • 通过this.$parent或者this.$children拿到父或子组件实例。（并不推荐）。

3. v-if 和 v-for 的优先级哪个高？

• 在 vue2 中 v-for 的优先级更高，但是在 vue3 中v-if 的优先级更高。
• 优化：
  • 用计算属性computed过滤出数据再进行渲染（效率高可维护性强）；
  • 先v-if再v-for（只判断一次，性能更高）。

4. computed、methods、watch之间的区别

• computed：能缓存，不支持异步，自动监听依赖值的变化而动态返回内容。
• methods：本身没有缓存，每次调用都得重新计算。
• watch：没有缓存，支持异步，只要数据发生变化就会执行监听函数。（监听是一个过程，属性值可以是一个对象）。

5. MVVM 和 MVC的区别

• MVVM：

M - Model 数据
V - View 视图
VM - ViewModel 视图-数据：它是View和Model的粘合体，负责View和Model的交互和协作
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法，get set 方法。
MVVM最标志的特性是数据绑定，核心理念是通过申明式的数据绑定实现View层和其它层的分离。完全解耦View层这种理念，也是的Web前端的测试用例编写变得简单。
MVVM 最重要的一个特征就是数据双向绑定, 而 React 是单向数据流, 状态驱动视图, 它没有纯粹意义上的 VM, 它有的只是用属性和状态去映射视图, 很明显不是 MVVM. 顶多也就是 MVVM 中的 V 层.对于 Vue从技术上讲，Vue.js 主要关注 MVVM 模式的 ViewModel 层, 它通过双向数据绑定连接视图和模型, 它更像是 MVVM 但并未完全按照 MVVM 去实现, 只是借鉴了 MVVM 中的一些思想.
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

• MVC：

M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。
V - View 视图，显示数据的页面，一般为html。
C - Controller 控制器： 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。
MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

• 两者的区别：

1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；
2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。”
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
具体的演变流程：传统MVC ——> MVP ——> MVVM