VUE相关面试题

怎么理解mvvm，mvc原理，怎么理解vue是渐进式框架（难度：★）

        MVVM是一种视图数据双向绑定的开发模式，在浏览器视图层修改数据会影响数据层，在数据层修改数据会实时更新在浏览器视图层。

        MVC架构指的是`MODEL-VIEW-CONTROLLER`，`MVC`允许在不改变视图的情况下，改变用户对视图输入的响应方式，用户的`VIEW`操作交给了`CONTROLLER`处理，CONTOROLLER中响应`VIEW`的事件调用`MODEL`的接口对数据进行操作，只要`MODEL`发生变化，就响应给相关的视图进行更新操作。
        用户通过`VIEW`层操作，`CONTROLLER`通过事件监听，监听到`VIEW`的变动，然后通过MODEL进行数据的交互（向服务器端的接收和发送）。随即跟新数据。

        vue渐进式javascript开发框架：
        不需要一次性接受并使用它的全部功能特性 
        vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起

 vue的优点，缺点（难度：★）

优点：
1. 组件化开发
2. 单页面路由
3. 丰富的Api方法
4. 双向的数据绑定
5. 单向数据流
6. 易于结合其他第三库
缺点
1. 生态系统不够完善
2. 可扩展性稍差

jquery和vue这两个框架有什么区别（难度：★）

jquery直接操作DOM修改数据，数据与视图是相互分离的
VUE不推荐手动操作DOM，而是以数据驱动视图

vue生命周期函数（难度：★）

四个阶段八个方法
一、初始化阶段：
        beforeCreate( ) 方法在 data(){ } 和 methods{ } 创建之前执行（也就是在 new Vue( ) 之后执行），因此不能获取到data(){ }中的变量；使用场景：一般很少使用。
        created( ) 方法在 data(){ } 和 methods{ } 创建之后执行，因此能获取到data(){ } 中的变量，但不能获取真实DOM；使用场景：发起ajax请求，注册全局事件。
        created( ) 执行完成后 Vue实例 会开始编译模板，生成虚拟DOM，有template使用template内部的结构作为模板，没有则使用 index.html 内部的 div里的结构作为模板。
二、挂载阶段：
        beforeMount( ){  } 方法在 真实DOM 挂在之前执行；使用场景：可以预处理data( ){ } 内部的数据，不会触发 updated 钩子函数。
        mounted( ){  } 方法在真实DOM挂在之后执行；使用场景：可以获取挂载后的真实DOM。
三、更新阶段：
        beforeUpdate( ){  }是在data更新之前触发，因此无法获取到更新后的DOM元素（注意：更新数据后，JS解析引擎会先解析到更新事件，此时会先执行beforeUpdate( ){  }，然后再执行updated( ){  }，虽然 beforeUpdate( ){  } 是在更新前触发，但只有更新的时候才触发）
        updated( ){  }是在data更新之后触发，因此可以获取到更新后的DOM元素
四、销毁阶段：
        beforeDestroy( ){  } 是在组件被销毁之前触发；
        destroyed( ){  } 是在组件被销毁后触发；
        使用场景：移除全局事件，移除当前组件的定时器，eventBus 跨组件通信移除事件使用 $off 方法。

vue生命周期中父子组件的渲染顺序（难度：★★）

父beforeCreate-->父created-->父beforeMount-->子beforeCreate-->子created-->子beforeMount-->
子mounted-->父mounted

说一下对vue的虚拟dom的理解（难度：★★）

虚拟DOM本质上就是一个JS对象，仅保存DOM节点的信息、属性和内容

watch和computed的区别（难度：★★）

计算属性computed: 
        1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
        2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
        3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
        4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是多对一或者一对一，一般用computed
        5. 如果computed属性的属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：
        1. 不支持缓存，数据变，直接会触发相应的操作；
        2. watch支持异步；
        3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
        4. 当一个属性发生变化时，需要执行对应的操作：一对多；
        5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：
        immediate：组件加载立即触发回调函数执行，
        deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

为什么组件中的data是个函数（难度：★★）

        因为对象是一个引用数据类型，如果data是一个对象的情况下会造成所有组件都指向一个相同的data。
        而当data是一个函数的情况下，每次函数执行完毕后都会返回一个新的对象，这样的话每个组件都会维护一份独立的对象（data）

组件通信的方式知道几种说一下（难度：★★）

一、props/$emit（父子组件通信）
二、$emit/$on（兄弟组件通信）
三、vuex{ state ，mutations ，actions ，getter }
四、$attrs/$listeners
        $attrs ：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)————就是接收除了props声明外的所有绑定属性（class、style除外）
        $listeners ：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件————就是接收除了带有.native事件修饰符的所有事件监听器