Vue框架面试题

对vue的理解，有什么特点，vue为什么不能兼容IE8及以下浏览器

  1. vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统
  2. vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算
  3. 特点：简洁轻量、数据驱动、组件化、模块友好
  4. vue.js使用了IE8无法模拟的 ECMAScript 5 特性，没有替代方案

简述Vue双向数据绑定的原理

  1. 主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的
  2. vue是通过数据劫持的方式来做数据绑定，最核心的方法就是通过Object.defineProperty()来实现对属性的劫持
  3. 在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数，达到监听数据变动的目的

什么是 MVVM？

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

父组件向子组件传值的方法？

父组件传递的数据子组件用 props 方法接收。
子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）

1
2
props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

子组件向父组件传值的方法？

子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。

Vuex 有哪几种属性？

  • state：基本数据
  • getters：从基本数据派生的数据
  • mutations：提交更改数据的方法，同步！
  • actions：像一个装饰器，包裹 mutations，使之可以异步。
  • modules：模块化 Vuex。

简述vue等单页面应用及优缺点

单页面应用，用户所有的操作都在一个页面完成

  • 优点：无刷新，用户体验好，共享资源只需要请求一次即可，采用组件化的思想，代码结构更加规范化，便于修改和调整

-缺点：对搜索引擎不友好、低版本不支持，第一次加载首页耗时相对较长，不能使用浏览器导航按钮，需要自行实现前进后退

React与Vue对比

  • 相同点：

　　都支持服务器端渲染、数据驱动视图，状态管理

　　都有虚拟DOM、组件化开发、通过props参数进行父子组件数据的传递

  • 不同点：
    　　React严格上只针对MVC的C层,Vue则是MVVM模式

　　虚拟DOM方面

　　vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树，而React每当应用的状态被改变时,全部组件都会重新渲染

　　视图渲染方面

　　React采用JSX渲染到DOM，vue使用的是template模板

　　数据绑定方面

　　vue实现了数据的双向绑定，react数据流动是单向的

　　state对象方面

　　react应用中不可变的,需要使用setState方法更新状态

　　vue中,state对象不是必须的,数据由data属性在vue对象中管理

前端组件化有什么优势

  1. 提高开发效率

  2. 方便重复使用

  3. 便于协同开发

  4. 更容易管理维护

说一下vue的生命周期，当使用keep-alive属性时，会增加哪两个生命周期

  • 创建前/后beforeCreate/created：

　　在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有

  • 载入前/后beforeMount/mounted：

　　在beforeMount阶段，vue实例的el和data都初始化了，但还是挂载之前为虚拟的dom节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。

  • 更新前/后beforeUpdate/updated：

　　当data变化时，会触发beforeUpdate和updated方法。不常用

  • 销毁前/后beforeDestory/destoryed：

　　beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件

  • 执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在

　　在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:

　　activated 与 deactivated

说说你对angular脏检查理解

angular中无法判断数据是否做了更改，所以设置了一些条件，当触发这些条件之后就会执行一个检测来遍历所有的数据，对比刚才更改的地方执行变化

这个检查很不科学而且效率不高，有很多多余的地方

如何使css只在当前组件起作用

如果想写的css只对当前组件起作用，则在style中写入scoped

vue中v-if和v-show的区别

  • v-if和v-show都是用来控制元素的渲染

  • v-if是根据后面数据的真假，来判断DOM的添加删除等操作

  • v-show只是在修改元素的css样式（display属性值）

  • v-if如果初始渲染条件为真，就渲染，反之就不渲染

  • v-show不管初始条件是否为真，都会被渲染

  • v-if有更高的切换消耗，不适合做频繁的切换

  • v-show有更高的初始渲染消耗，适合做频繁的切换

vue有哪些修饰符

事件修饰符：stop、prevent、self、once

键盘修饰符：enter、space、up、down

表单修饰符修饰符：number、trim、lazy

列举vue的几种常用指令

v-if、v-show、v-for、v-on、v-bind、v-model、v-once

简单描述每个周期具体适合哪些场景

　　beforecreate : 可以在这加个loading事件，在加载实例时触发

　　created : 初始化完成时的操作，比如结束loading事件，也可以操作异步请求

　　mounted : 挂载元素，获取到DOM节点，推荐使用nextTick

　　updated : 如果对数据统一处理，在这里写上相应函数

　　beforeDestroy : 可以做一个确认停止事件的确认框，关掉定时器

　　destroyed：当前组件已被删除，清空相关内容