前端面试题---vue部分

1.vue的两大核心思想

　　组件化和数据驱动

2.如何理解vue中的MVVM模式

　　Model-View-ViewModel(简称为mvvm)是一种设计思想，model层代表数据模型，也可以再model中定义数据、修改、操作业务逻辑。view层代表ui组件，它负责将数据模型转换为UI展现出来。viewmodel通过双向数据绑定把view层和model层连接起来，而view和model之间的同步工作完全是自动的，无需人为干涉。

　　因此开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据状态的同步问题，复杂的数据状态维护完全由mvvm来统一管理。

3.vue的有点是什么？

• 低耦合：试图（view）可以独立于model变化和修改，一个viewmodel可以绑定到不同的“view”上，当“view”变化的时候“model”可以不变，当“model”变化的时候“view”也可以不变。
• 可重用性：可以把一些试图逻辑放在一个viewModel里面，让很多view重用这段试图逻辑。
• 独立开发：开发人员专注于业务逻辑和数据的开发，设计人员专注于页面设计。
• 可测试：界面素来较难测试，而现在测试可以针对viewmodel来写。

4.vue中<keep-alive>的作用是什么？

　　包裹动态组件，把切换出去的数组保留在缓存中，可以保留组件的状态或者避免重新渲染

5.vue使用v-for的时候key的作用

　　使用v-for当数据重新排列数据时会复用已在页面渲染好的元素，不会移动DOM元素来匹配数据项的顺序，需要通过key特性设置唯一的值来标记以让vue区分它们，以便它能跟踪每个节点的身份，从而复用和重新排现有元素。

5.vue路由的钩子函数

　　vue-router中的导航钩子，主要用来拦截导航让它完成跳转或取消，有多种方式可以在路由导航发生时执行钩子，比如全局的、单个路由独享的、或者组件级的。　　

• 全局钩子  （主要包括beforeEach和afterEach）
  • beforeEach函数有三个参数
    • to：router即将进入的路由对象
    • from：当前导航即将离开的路由
    • next：function进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed ；否则为false，终止导航。
  • afterEach函数
    • 不用传next函数，一般用来判断权限，以及页面丢失时候需要执行的操作

  • const router = new VueRouter();
    router.beforeEach((to,from,next)=>{.....})                                

• 单个路由独享的钩子
  • 主要用于写某个指定路由跳转时需要执行的逻辑

  • const router = new VuePouter({
        routers：[
                {
                    path:'/todolist',
                    component:'todolist',
                    beforeEnter:(to,from,next) => {...},
                    beforeLeave:(to,from,next) => {...}
                }
          ]
    })                                            

• 组件内的钩子
  • 主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

6.vue中Dom的操作问题

　vue中的DOM是虚拟的，一般编写代码的时候不需要操作DOM元素，但也会遇到一些情况需要操作DOM

• vue的实例挂载在一个DOM元素上，通过this.$el获取el选项挂载的DOM元素
• 通过ref操作DOM，ref被用来给元素或者子元素注册引用信息。引用信息将会注册在父元素的$refs对象上

7.MVVM和MVC的区别？哪些场景适合

　　MVVM和MVC其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的ViewModel。mvvm主要解决了mvc中的大量的DOM操作使页面渲染功能降低，加载速度变慢。影响用户体验。

　　区别：vue数据驱动。通过数据来显示试图而不是节点操作

　　场景：数据操作比较多的场景，更加便捷

8.v-if 和 v-show 指令的共同点和不同点

　　v-show指令是通过修改元素的display的css属性让其显示或者隐藏；

　　v-if 指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；

　　使用v-show 会更加节省性能上的开销，当只需要一次显示或隐藏的时候，使用v-if更加合理