2020-08-08

vue面试题

1.mvc模式和mvvm模式
（1）MVC模式
mvc即model-view-controller（模型-视图-控制器）
（2）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 上。
2.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3…vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
4…第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
5.DOM 渲染在 哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
6.什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
①beforecreate : 完成实例初始化，初始化非响应式变量，this指向创建的实例；可以在这加个loading事件；data computed watch methods上的方法和数据均不能访问
②created：实例创建完成，完成数据(data props computed)的初始化 导入依赖项。可访问data computed watch methods上的方法和数据未挂载DOM,不能访问$el,$ref为空数组，可在这结束loading，还做一些初始化，实现函数自执行,可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
③berofeMount:el，template|/outerHTML能找到对应的template,并编译成render函数
④mounted：完成创建vm.$el，和双向绑定，完成挂载DOM和渲染;可在mounted钩子对挂载的dom进行操作即有了DOM且完成了双向绑定可访问DOM节点,$ref可在这发起后端请求，拿回数据，配合路由钩子做一些事情；可对DOM 进行操作
⑤beforeUpdate：数据更新之前可在更新前访问现有的DOM,如手动移除添加的事件监听器；
⑥updated :完成虚拟DOM的重新渲染和打补丁；组件DOM 已完成更新；可执行依赖的dom 操作注意：不要在此函数中操作数据，会陷入死循环的。
⑦activated:在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用
Activated：钩子触发
deactivated ：for keep-alive 组件被移除时使用
⑧beforeDestroy： 在执行app.$destroy()之前可做一些删除提示，如：你确认删除XX吗？可用于销毁定时器，解绑全局时间 销毁插件对象
destroyed ：当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁，这时组件已经没有了，你无法操作里面的任何东西了。