ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端培训分享Vue面试题

好程序员web前端培训分享Vue面试题

原创 Html/css 作者:好程序员 时间:2020-07-22 15:43:23 0 删除 编辑

  好程序员web 前端培训分享 Vue 面试题 为了帮助大家顺利 通过面试 今天 为准备 参加web 前端面试的 小伙伴们准备了这篇文章,让我们一起来看一看吧!

   一、什么是MVVM?

   MVVM Model-View-ViewModel 的缩写。 MVVM 是一种设计思想。 Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑 ;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来, ViewModel 是一个同步 View Model 的对象。

   MVVM 架构下, View Model 之间并没有直接的联系,而是通过 ViewModel 进行交互, Model ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

   ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View

   Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

   二、mvvm mvc 区别 ? 它和其它框架 (jquery) 的区别是什么 ? 哪些场景适合 ?

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

   区别:vue 数据驱动,通过数据来显示视图层而不是节点操作。

   场景:数据操作比较多的场景,更加便捷

   三、vue 的优点是什么 ?

   低耦合。视图(View) 可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 "View" 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

   可重用性。你可以把一些视图逻辑放在一个ViewModel 里面,让很多 view 重用这段视图逻辑。

   独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel) ,设计人员可以专注于页面设计。

   可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel 来写。

   四、 组件之间的传值?

   父组件与子组件传值

   父组件通过标签上面定义传值

   子组件通过props 方法接受数据

   子组件向父组件传递数据

   子组件通过$emit 方法传递参数

   五、路由之间跳转

   声明式( 标签跳转 ) 编程式 ( js 跳转 )

   六、vue.cli 中怎样使用自定义的组件 ? 有遇到过哪些问题吗 ?

   第一步:在components 目录新建你的组件文件 (indexPage.vue) script 一定要 export default {}

   第二步:在需要用的页面( 组件 ) 中导入: import indexPage from '@/components/indexPage.vue'

   第三步:注入到vue 的子组件的 components 属性上面 ,components:{indexPage}

   第四步:在template 视图 view 中使用,

   例如有indexPage 命名,使用的时候则 index-page

   七、vue 如何实现按需加载配合 Webpack 设置

   Webpack 中提供了 require.ensure() 来实现按需加载。以前引入路由是通过 import 这样的方式引入,改为 const 定义的方式进行引入。

   不进行页面按需加载引入方式:import home from '../../common/home.vue'

   进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

   八、vuex 面试相关

   (1)vuex 是什么 ? 怎么使用 ? 哪种功能场景使用它 ?

   vue 框架中状态管理。在 main.js 引入 store ,注入。新建一个目录 store ,… .. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

   (2)vuex 有哪几种属性 ?

   有五种,分别是 State Getter Mutation Action Module

   vuex State 特性

   A Vuex 就是一个仓库,仓库里面放了很多对象。其中 state 就是数据源存放地,对应于一般 Vue 对象里面的 data

   B state 里面存放的数据是响应式的, Vue 组件从 store 中读取数据,若是 store 中的数据发生改变,依赖这个数据的组件也会发生更新

   C 、它通过 mapState 把全局的 state getters 映射到当前组件的 computed 计算属性中

   vuex Getter 特性

   A getters 可以对 State 进行计算操作,它就是 Store 的计算属性

   B 、 虽然在组件内也可以做计算属性,但是 getters 可以在多组件之间复用

   C 、 如果一个状态只在一个组件内使用,是可以不用 getters

   vuex Mutation 特性

   Action 类似于 mutation ,不同在于: Action 提交的是 mutation ,而不是直接变更状态 ;Action 可以包含任意异步操作。

   (3) 不用 Vuex 会带来什么问题 ?

   可维护性会下降,想修改数据要维护三个地方;

   可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;

   增加耦合,大量的上传派发,会让耦合性大大增加,本来Vue Component 就是为了减少耦合,现在这么用,和组件化的初衷相背。

   九、 v-show v-if 指令的共同点和不同点

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

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

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

   十、 如何让CSS 只在当前组件中起作用

   将当前组件的<style> 修改为 <style scoped>

   十一、<keep-alive> </keep-alive> 的作用是什么 ?

   包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

   十二、Vue 中引入组件的步骤 ?

   1) 采用 ES6 import ... from ... 语法或 CommonJS require() 方法引入组件

   2) 对组件进行注册 , 代码如下

   // 注册 Vue.component('my-component', { template:'

   A custom component!

   '})

3)  使用组件<my-component> </my-component>

 


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913864/viewspace-2706196/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    342
  • 访问量
    154342