面试常考的Vue知识点

最新推荐文章于 2023-03-08 22:44:18 发布

置顶

马小兜-

最新推荐文章于 2023-03-08 22:44:18 发布

阅读量462

点赞数

分类专栏：面试经典文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43514149/article/details/107579550

版权

本文深入探讨Vue的面试重点，包括MVVM的理解、Vue生命周期的各个阶段及其作用，如beforeCreate、created、mounted等，以及如何通过Object.defineProperty实现数据双向绑定。此外，还详细介绍了组件间通信、路由的hash和history模式，Vue和React的区别，以及vuex、keep-alive的使用场景。最后，阐述了Vue的两大核心：数据驱动和组件系统，以及key的作用和常见面试题解答。

摘要由CSDN通过智能技术生成

一、对于MVVM的理解

MVVM是Model-View-ViewModel的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
View代表UI组件，它负责将数据模型转换成UI 展现出来
ViewModel监听模型数据的改变和控制视图的行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的工作室同步自动的，无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理
在这里插入图片描述

二、Vue的生命周期

beforeCreated（创建前）在数据观测和初始化事件还未开始
created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成如下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上
Mounted（载入后）在el被新创建的vm.$el替换，并挂载到实例上去之后调用，实例已完成如下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中，此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步更新状态，不会触发附加的重渲染过程
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM操作。然而在大多数情况下，应该避免在此期间更改状态，因为可能会导致更新无线循环，该钩子在服务器端渲染期间不被调用
beforeDestroy（销毁前）在实例销毁之前调用，实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。