入门级Vue 面试题+详解答案

2401_84097798

于 2024-05-16 11:30:43 发布

阅读量376

点赞数 4

分类专栏：程序员文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_84097798/article/details/138954179

版权

程序员专栏收录该内容

253 篇文章 0 订阅

订阅专栏

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

注意：Vue 并没有完全遵循 MVVM 的思想这一点官网自己也有说明

那么问题来了为什么官方要说 Vue 没有完全遵循 MVVM 思想呢？

严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。

2 为什么 data 是一个函数

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

3 Vue 组件通讯有哪几种方式

props 和 e m i t 父组件向子组件传递数据是通过 p r o p 传递的，子组件传递数据给父组件是通过 emit 父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过 emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit 触发事件来做到的
p a r e n t , parent, parent,children 获取当前组件的父组件和当前组件的子组件
a t t r s 和 attrs 和 attrs和listeners A->B->C。Vue 2.4 开始提供了 a t t r s 和 attrs 和 attrs和listeners 来解决这个问题
父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)
$refs 获取组件实例
envetBus 兄弟组件数据传递这种情况下可以使用事件总线的方式
vuex 状态管理

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

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

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

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

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

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

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

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

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

activated keep-alive 专属，组件被激活时调用

deactivated keep-alive 专属，组件被销毁时调用