前端面试题Vue篇(一)

vue 的优缺点

优点 :

1.轻量级框架
    只关注视图层,是一个构建数据的视图集合,大小只有几十kb
2.简单易学
    国人开发,中文文档,不存在语言障碍,易于理解和学习
3.双向数据绑定
    在数据操作方面更为简单
4.组件化
    实现了html的封装和重用,在构建单页面应用方面有着独特的优势
5.视图,数据,结构分离
    是数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
6.虚拟DOM
    dom操作时非常耗费性能的  
    不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式
7.运行速度更快
    像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

缺点 :

1.Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
2.Vue 不支持IE8
3.生态环境差不如angular和react
4.社区不大
5.吃内存（每个组件都会实例化一个Vue实例，实例的属性和方法很多）
6.定义在data里面的对象，实例化时，都会递归的遍历转成响应式数据，然而有的响应式数据我们并不会用到，造成性能上的浪费

---

vue和react有什么不同？使用场景分别是什么?

区别 :

• 监听数据变化的原理不同

  • Vue 通过 getter/setter 以及一些函数的劫持,能精确得到数据变化,不需要特别的优化就能达到很好的性能
  • React 默认是通过比较引用的方式进行的,如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒

• 数据流的不同
  
  Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定:

  父子组件之间，props 可以双向绑定
  组件与DOM之间可以通过 v-model 双向绑定

  在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
  然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。
  不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了.

• HoC (高阶组件) 和 mixins

  在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）

  React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC，关于mixin究竟哪里不好，可以参考React官方的这篇文章 Mixins Considered Harmful

  而 Vue 一直是使用 mixin 来实现的。

  为什么 Vue 不采用 HoC 的方式来实现呢？

  高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

  但是Vue就不行了，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个高阶组件，那么这个被包装的组件就无法正常工作了。

• 组件通信的区别

  • 在Vue 中有三种方式可以实现组件通信：

    • 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信
    • 子组件通过 事件 向父组件发送消息
    • 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级

  • 在 React 中，也有对应的方式:

    • 父组件通过 props 可以向子组件传递数据或者回调
    • 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

• 模板渲染方式不同

  • 在表层上， 模板的语法不同

    • React 是通过JSX渲染模板
    • 而Vue是通过一种拓展的HTML语法进行渲染
    • 但其实这只是表面现象，毕竟React并不必须依赖JSX。

  • 在深层上，模板的原理不同，这才是他们的本质区别：

    • React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现
    • Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法.

---