web前端面试题@一（vue、vue-router、vuex、双向数据绑定）

一、 Vue.js是什么

        以我个人的理解，Vue.js是一个轻巧、高性能、可组件化的MVVM库；是一个构建数据驱动的Web界面的库。是一套构建用户界面的 渐进式框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

    简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。核心是一个响应的数据绑定系统。

二、Vue与MVVM

Vue是一个 MVVM框架，其各层的对应关系如下：

         View层：在Vue中是绑定dom对象的HTML

        ViewModel层：在Vue中是实例的vm对象

        Model层：在Vue中是data、computed、methods等中的数据

——在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

三、Vue的响应式原理

       Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响，Vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

四、响应式兼容

        由于 Object.defineProperty() 方法只部分支持IE9，所以Vue兼容IE版本最低为IE9，在IE9中，Vue的核心框架、vue-router、vuex是确保可以正常使用的

五、vue-router实现原理

        原理核心就是 更新视图但不重新请求页面。在vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

vue-router 提供了三种运行模式：

● hash: 使用 URL hash 值来作路由。默认模式。

● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

● abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端

六、什么是vuex？

  我个人理解，vuex是专门为vue.js提供的一种状态管理模式，它采用的是集中式储存和管理所有组件的状态和数据，方便使用。

七、为什么使用vuex？

我觉得，当我们使用 Vue.js 来开发一个单页应用时，如果组件层级嵌套过多，或是需要通过 props 深层传递的一些数据时，最明显的就是会导致数据流异常地混乱和不易管理。所以，当数据量大的时候，我们需要使用vuex。

八、vuex的工作流程？

    通过vue组件中的dispatch来触发actions，actions再调用commit来提交mutation来更改数据并改变试图。

九、Vuex有几部分组成？

  总共有5部分，分别是state、actions、mutations、getters、module

    state储存的是基本数据

    Actions 是包含异步操作

    Mutation 是提交更改数据，使用store.commit方法更改state的储存状态。

    Getters 是state的计算属性，对state的加工，是派生出的数据

  Module 是state的分割模块，每个模块包含前state、actions、mutations、getters

十、Veu中 assets和static 的区别？

相同点：

    Assets和static都是存放静态资源的文件。项目所需要的静态文件、图片、样式文件都可以放在这两个文件夹下

不同点：

    在Assets中存放的静态资源，在项目打包时会将这些静态资源与代码、index.html文件一起一同进行打包压缩，上传到服务器

    在static中存放的静态资源，不会被打包压缩格式化等流程，而是直接进入打包好的目录，直接上传到服务器

十一、双向数据绑定的原理

        vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；