当前位置：首页 > news >正文

Vue了解

news 来源：原创 2025/7/10 10:34:51

MVVM和MVC区别是什么?

MVC ：传统的设计模式。

设计模式：一套广泛被使用的开发方式

M： model 模型

模型：就是数据的意思

V ： view视图

视图：就是页面的意思

C：controller控制器

控制器：在这里写js业务逻辑，把数据M 渲染到视图 V （有点类似于我们之前学习的，把数据渲染到页面）

MVVM： Vue所使用的设计模式

MVVM，一种软件架构模式，决定了写代码的思想和层次

M： model数据模型 (data里定义)

V： view视图（页面标签）

VM： ViewModel视图模型 (vue.js源码)

MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOM

V （修改视图） -> M（数据自动同步）

M（修改数据） -> V （视图自动同步）

为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？

VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。对于VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE是响应式的（reactive）这是VUE最独特的特性，也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。

Vue的生命周期方法有哪些？一般在哪一步发送请求？

beforeCreate 在实例初始化之后，数据观测（data observe）和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。

created 实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测（data observe ），属性和方法的运算，watch/event 事件回调。这里没有 $el，如果非要想与 DOM 进行交互，可以通过vm.$nextTick 来访问 DOM。

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom节点。

beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。（数据修改页面未修改）

updated 发生在更新完成之后，当前阶段组件 Dom 已经完成更新。要注意的是避免在此期间更新数据，因为这个可能导致无限循环的更新，该钩子在服务器渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行善后收尾工作，比如清除定时器。

destroyed Vue实例销毁后调用。调用后，Vue实例指示的东西都会解绑定，所有的事件监听器会被移除，左右的子实例也会被销毁，该钩子在服务器端渲染不被调用。

异步请求在哪一步发起？

可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。

如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面loading时间；

如果依赖DOM元素：需要再mounted里面进行请求

Vue 中如何进行组件的使用？Vue 如何实现全局组件的注册？

要使用组件，首先需要使用 import 来引入组件，然后在 components 属性中注册组件，之后就可以在模板中使用组件了。

可以使用 Vue.component 方法来实现全局组件的注册。

v-show和v-if的区别

面试官你好，我是这么理解v-if和v-show的。 v-if本质其实是动态的创建或者删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。

Computed 和 Watch 的区别

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：

当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

Vue中key值作用

面试官你好,我是这么理解key值的,key值的主要作用是给元素添加一个唯一标识符,用于提高vue渲染性能,当data发生变化的时候,vue会使用diff算法来对比新旧虚拟DOM.如果key值相同,才会考虑复用元素.如果key值不同,则会强制更新元素.一般通过给元素key设置为id,来保证vue更新数据的时候可以最大限度复用相同的key值的元素.

v-for指令使用key值几种情况

1. 没有key值(默认是下标) : 不复用，就地更新

2. key值为下标(相当于没设置) : 不复用，就地更新

3. key值是id : 复用相同的key，更新不同的key

总结： key值优先设置id, 没有id就用下标

axios的请求方式

get请求（常用于获取数据）

post请求（常用于提交表单数据和上传文件）

put请求（对数据进行全部更新）

patch请求（修改部分数据）

delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

注意：axios常根据业务需求需要进行二次封装

为什么避免v-for和v-if在一起使用？

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次。

相关文章：