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 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

你可能感兴趣的:(web前端面试题@一(vue、vue-router、vuex、双向数据绑定))