前端面试——Vue

MVVM与MVC的不一样

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让咱们将视图 UI 和业务逻辑分开。

MVVM（Model-View-ViewModel）框架的由来即是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架而且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

MVP 里的M 其实和MVC里的M是一个，都是封装了核心数据、逻辑和功能的计算关系的模型，而V是视图（窗体），P就是封装了窗体中的全部操做、响应用户的输入输出、事件等，与MVC里的C差很少，区别是MVC是系统级架构的，而MVP是用在某个特定页面上的，也就是说MVP的灵活性要远远大于MVC，实现起来也极为简单。

MVC 一般的处理时序以下：

1. View 接受用户的交互请求；
2. View 将请求转交给 Controller；
3. Controller 操做 Model 进行数据更新；
4. 数据更新以后，Model 通知 View 数据变化；
5. View 显示更新以后的数据。

MVP 一般的调用时序以下：

1. View 接受用户的交互请求；
2. View 将请求转交给 Presenter；
3. Presenter 操做 Model 进行业务处理；
4. Model 通知 Presenter 数据发生变化；
5. Presenter 更新 View 的数据。

和 MVC 不一样的是，Presenter 会副作用于 View，不像 Controller 只能被动的接受 View 的指挥。

在MVP模式中，为了让UI层可以从逻辑层上分离下来，设计师们在UI层与逻辑层之间加了一层interface。不管是UI开发人员仍是数据开发人员，都要尊重这个契约、按照它进行设计和开发。这样，理想状态下不管是Web UI仍是Window UI就均可以使用同一套数据逻辑了。借鉴MVP的IView层，养成习惯。View Model听起来比Presenter要贴切得多；会把一些跟事件、命令相关的东西放在MVC的'C',或者是MVVM的'Vm'。

MVVM 表明的是 Model-View-ViewModel。MVVM 模式将 Presenter 更名为 ViewModel，基本上与 MVP 模式彻底一致，惟一区别在于 ViewModel 将密切关联的 Model 和 View 的逻辑单独提取出来，用数据绑定将他们关联到一块儿。

MVVM模式和MVC模式同样，主要目的是分离视图（View）和模型（Model），有几大优势

1. 低耦合。视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。

2. 可重用性。你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。

3. 独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计，使用Expression Blend能够很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。

Vue的生命周期

                                  

new Vue() > 初始化事件和生命周期 > beforeCreate > 数据绑定 > created > 若是有el属性，则编译模板 > beforeMount > 添加$el属性，并替换掉挂载的DOM元素 > mounted > 数据更新 > beforeUpdate > 从新编译模板并渲染DOM > updated > 调用$destoryed > beforeDestory > 销毁vue实例 > destroyed

vue 在 v-for 时给每项元素绑定事件须要用事件代理吗？为何？

通常给 v-for 绑定事件时，都会让节点指向同一个事件处理程序，必定程度上比每生成一个节点都绑定一个不一样的事件处理程序性能好，可是监听器的数量仍不会变，因此使用事件代理会更好一点。

Redux 和 Vuex 的设计思想

共同点

首先二者都是处理全局状态的工具库，大体实现思想都是：全局state保存状态---->dispatch(action)------>reducer(vuex里的mutation)----> 生成newState; 整个状态为同步操做；

区别

最大的区别在于处理异步的不一样，vuex里面多了一步commit操做，在action以后commit(mutation)以前处理异步，而redux里面则是经过中间件处理

Redux流程

一、用户经过 View 发出 Action：store.dispatch(action);

 二、而后 Store 自动调用 Reducer，而且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = xxxReducer(previousState, action); 

三、State 一旦有变化，Store 就会调用监听函数。

store.subscribe(listener); 四、listener能够经过 store.getState() 获得当前状态。若是使用的是 React，这时能够触发从新渲染 View。

VUEX

一、在vue组件里面，经过dispatch来触发actions提交修改数据的操做。

二、而后再经过actions的commit来触发mutations来修改数据。

三、mutations接收到commit的请求，就会自动经过Mutate来修改state（数据中内心面的数据状态）里面的数据。

四、最后由store触发每个调用它的组件的更新

对比Redux

Redux： view——>actions——>reducer——>state变化——>view变化（同步异步同样）

Vuex： view——>commit——>mutations——>state变化——>view变化（同步操做）

view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操做）

vue双向数据绑定

<input id="input" type="text" />

<div id="text"></div>

let input = document.getElementById("input");
let text = document.getElementById("text");
let data = { value: "" };
Object.defineProperty(data, "value", {
  set: function(val) {
    text.innerHTML = val;
    input.value = val;
  },
  get: function() {
    return input.value;
  }
});
input.onkeyup = function(e) {
  data.value = e.target.value;
};复制代码

Virtual DOM 真的比操做原生 DOM 快吗？

这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操做，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架能够比纯手动的优化 DOM 操做更快，由于框架的 DOM 操做层须要应对任何上层 API 可能产生的操做，它的实现必须是普适的。

为何 Vuex 的 mutation 和 Redux 的 reducer 中不能作异步操做？

Mutation 必须是同步函数 一条重要的原则就是要记住 mutation 必须是同步函数。为何？请参考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}复制代码

如今想象，咱们正在 debug 一个 app 而且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都须要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：由于当 mutation 触发的时候，回调函数尚未被调用，devtools 不知道何时回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交 Mutation 你能够在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（须要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`


  // `mapMutations` 也支持载荷：
  'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
  add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})


  }
}


复制代码

为何Redux的reducer里不能有异步操做。

先从Redux的设计层面来解释为何Reducer必须是纯函数 若是你常常用React+Redux开发，那么就应该了解Redux的设计初衷。Redux的设计参考了Flux的模式，做者但愿以此来实现时间旅行，保存应用的历史状态，实现应用状态的可预测。因此整个Redux都是函数式编程的范式，要求reducer是纯函数也是天然而然的事情，使用纯函数才能保证相同的输入获得相同的输入，保证状态的可预测。

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为何在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

1. Object.defineProperty没法监控到数组下标的变化，致使经过数组下标添加元素，不能实时响应；

2. Object.defineProperty只能劫持对象的属性，从而须要对每一个对象，每一个属性进行遍历，若是，属性值是对象，还须要深度遍历。Proxy能够劫持整个对象，并返回一个新的对象。

3. Proxy不只能够代理对象，还能够代理数组。还能够代理动态增长的属性。

//defineProperty实现

var data = { name: 'yck' }
observe(data)
let name = data.name // -> get value
data.name = 'yyy' // -> change value

function observe(obj) {
  // 判断类型
  if (!obj || typeof obj !== 'object') {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

function defineReactive(obj, key, val) {
  // 递归子属性
  observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log('get value')
      return val
    },
    set: function reactiveSetter(newVal) {
      console.log('change value')
      val = newVal
    }
  })
}

//代理

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let value
let p = onWatch(
  obj,
  v => {
    value = v
  },
  (target, property) => {
    console.log(`Get '${property}' = ${target[property]}`)
  }
)
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2



//代理

<body>
  hello,world
  <input type="text" id="model">

  <p id="word"></p>

</body>

<script>
  const model = document.getElementById("model")
  const word = document.getElementById("word")
  var obj= {};

  const newObj = new Proxy(obj, {
      get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function(target, key, value, receiver) {
        console.log('setting',target, key, value, receiver);
        if (key === "text") {
          model.value = value;
          word.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
      }
    });

  model.addEventListener("keyup",function(e){
    newObj.text = e.target.value
  })
</script>复制代码

Vue 组件中data为何返回的是个函数呢？

 由于组件是用来复用的，且在JS中的对象之间是引用关系，那若是组件中的data是一个对象，那么这样做用域没有隔离，子组件中的data属性值会相互影响，相反若是组件中的data是个函数，那么每一个实例能够维护一份被返回对象的独立的拷贝，那么这样组件实例之间的data属性值就不会互相影响了。

v-model 的使用？

原生input其实只是一个语法糖（事件的语法糖），:bind="value"与@change="value = $event.target.value"的结合。

自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

虚拟DOM

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现以前，咱们要改变页面展现的内容只能经过遍历查询 dom 树的方式找到须要修改的 dom 而后修改样式行为或者结构，来达到更新 ui 的目的。

这种方式至关消耗计算资源，由于每次查询 dom 几乎都须要遍历整颗 dom 树，若是创建一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

$nextTick 的使用？

当数据更新了，在dom中渲染后，自动执行该函数

nextTick 可让咱们在下次 DOM 更新循环结束以后执行延迟回调，用于得到更新后的 DOM。

在 Vue 2.4 以前都是使用的 microtasks，可是 microtasks 的优先级太高，在某些状况下可能会出现比事件冒泡更快的状况，但若是都使用 macrotasks 又可能会出现渲染的性能问题。因此在新版本中，会默认使用 microtasks，但在特殊状况下会使用 macrotasks，好比 v-on。

对于实现 macrotasks ，会先判断是否能使用 setImmediate ，不能的话降级为 MessageChannel ，以上都不行的话就使用 setTimeout

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (
  typeof MessageChannel !== 'undefined' &&
  (isNative(MessageChannel) ||
    // PhantomJS
    MessageChannel.toString() === '[object MessageChannelConstructor]')
) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
nextTick 同时也支持 Promise 的使用，会判断是否实现了 Promise

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve
  // 将回调函数整合进一个数组中
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // 判断是否可使用 Promise
  // 能够的话给 _resolve 赋值
  // 这样回调函数就能以 promise 的方式调用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}复制代码

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 进行任何修改了。 因此如今咱们只有 组件 <–> DOM 之间的双向绑定这一种。

然而 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 来实现父组件向子组件注入数据，能够跨越多个层级。

另外有一些好比访问 parent/parent/

p ar en**t

/children等比较dirty的方式这里就不讲了。

在 React 中，也有对应的三种方式：

• 父组件经过 props 能够向子组件传递数据或者回调

• 能够经过 context 进行跨层级的通讯，这其实和 provide/inject 起到的做用差很少。

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

模板渲染方式的不一样

在表层上， 模板的语法不一样

• React 是经过JSX渲染模板

• 而Vue是经过一种拓展的HTML语法进行渲染

但其实这只是表面现象，毕竟React并没必要须依赖JSX。 在深层上，模板的原理不一样，这才是他们的本质区别：

• React是在组件JS代码中，经过原生JS实现模板中的常见语法，好比插值，条件，循环等，都是经过JS语法实现的

• Vue是在和组件JS代码分离的单独的模板中，经过指令来实现的，好比条件语句就须要 v-if 来实现

对这一点，我我的比较喜欢React的作法，由于他更加纯粹更加原生，而Vue的作法显得有些独特，会把HTML弄得很乱。举个例子，说明React的好处：

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

Vuex 和 Redux 的区别

从表面上来讲，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，所以能够比较灵活的使用：

• 使用 dispatch 和 commit 提交更新

• 经过 mapState 或者直接经过 this.$store 来读取数据

在 Redux 中，咱们每个组件都须要显示的用 connect 把须要的 props 和 dispatch 链接起来。

另外 Vuex 更加灵活一些，组件中既能够 dispatch action 也能够 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来讲，最大的区别是两点：

• Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

• Redux 在检测数据变化的时候，是经过 diff 的方式比较差别的，而Vuex其实和Vue的原理同样，是经过 getter/setter来比较的（若是看Vuex源码会知道，其实他内部直接建立一个Vue实例用来跟踪数据变化）

而这两点的区别，其实也是由于 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用，很是的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。所以也会给人一种大型项目用React，小型项目用 Vue 的感受。

各自优势

React

1. React速度很快：它并不直接对DOM进行操做，引入了一个叫作虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减小DOM交互。

2. 跨浏览器兼容：虚拟DOM帮助咱们解决了跨浏览器问题，它为咱们提供了标准化的API，甚至在IE8中都是没问题的。

3. 一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，能够方便地进行隔离。每一个组件均可以进行独立的开发和测试，而且它们能够引入其它组件。这等同于提升了代码的可维护性。

4. 单向数据流：Flux是一个用于在JavaScript应用中建立单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减小了重复代码，这也是它为何比传统数据绑定更简单。

5. 同构、纯粹的javascript：由于搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

6. 兼容性好：好比使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务再也不让人望而生畏。

vue

1. 性能高效

2. 双向数据绑定

3. 学习难度低，上手简单。

React 的缺陷

1. React 只是一个视图库，而不是一个完整的框架。

2. 对于 Web 开发初学者来讲，有一个学习曲线。

3. 将 React 集成到传统的 MVC 框架中须要一些额外的配置。

4. 代码复杂性随着内联模板和 JSX 的增长而增长。

5. 若是有太多的小组件可能增长项目的庞大和复杂。

v-if和v-show的区别

相同点：v-if与v-show均可以动态控制dom元素显示隐藏

不一样点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

vue自定义指令

Vue.direcctive(‘focus’,{
		inserted:function(el){
			el.focus()
		}
})
new Vue({
		el:"app"
})

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个在绑定时执行一次的初始化动做。
inserted: 被绑定元素插入父节点时调用（父节点存在便可调用，没必要存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。经过比较更新先后的绑定值，能够忽略没必要要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

接下来咱们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。复制代码

跟keep-alive有关的生命周期是哪些？描述下这些生命周期

activated和deactivated

keep-alive的生命周期 1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated 2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

在遍历对象时，会按 Object.keys() 的结果遍历，可是不能保证它的结果在不一样的 JavaScript 引擎下都一致。

prop验证的type类型有哪几种？

Number, String, Boolean, Array, Function, Object

说说你对单向数据流和双向数据流的理解

单向数据流：全部状态的改变可记录、可跟踪，源头易追溯；全部数据只有一份，组件数据只有惟一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面(data-页面)，可是没有(页面-data)；若是用户在页面上作了变更，那么就手动收集起来(双向是自动)，合并到原有的数据中。 双向数据流：不管数据改变，或是用户操做，都能带来互相的变更，自动更新。

vue在created和mounted这两个生命周期中请求数据有什么区别呢？

1. created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，若是请求信息过多，页面会长时间处于白屏状态

2. 在created的时候，视图中的html并无渲染出来，因此此时若是直接去操做html的dom节点，必定找不到相关的元素，而在mounted中，因为此时html已经渲染出来了，因此能够直接操做dom节点，（此时document.getelementById 便可生效了）。

computed和watch的区别

computed特性

1.是计算值 2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值 3.具备缓存性，页面从新渲染值不变化,计算属性会当即返回以前的计算结果，而没必要再次执行函数

watch特性

1.是观察的动做 2.应用：监听props，$emit或本组件的值执行异步操做 3.无缓存性，页面从新渲染时值不变化也会执行

hash /a#/b； history /a/b。vue如何检测前端路由变化（vue中方法）

watch: {
$route(to, from){
console.log(to, from)
}
}复制代码

vuex action和mutation的区别

action：简单来讲就是异步操做数据

mutation：把处理数据逻辑方法所有放在mutation里面使数据和视图分离（vuex中store数据改变惟一的方法就是mutation）

vue-for中key的做用

key的做用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue能够区分它们，不然vue只会替换其内部属性而不会触发过渡效果。

首屏加载优化

1. 在使用ui库时,尽可能使用按需加载方式.

2. 异步加载,官方文档很详尽,改造起来也不难,能够试试

3. 合理规划三方库的引用.这个听起来有点龟毛,'收益'可能也不是很高,不过是个调整方向

4. 善用webpack-bundle-analyzer优化项目依赖

5. 服务端开启 gzip压缩

axios的理解

1. Axios是什么

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。(一看是基于promise是否是就对它的API有了大概的了解？哈哈哈)

2. Axios的特色

• 从浏览器中建立 XMLHttpRequests

• 从 node.js 建立 http 请求

• 支持 Promise API

• 拦截请求和响应 （就是有interceptor）

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防护 XSRF

Mvvm定义

MVVM是Model-View-ViewModel的简写。

即模型-视图-视图模型。

【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是链接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，咱们称之为数据的双向绑定。

为何要使用vue？

（1）只专一与视图层的轻量级的框架

（2）数据的双向绑定 优势是减小了dom操做

（3）组件化 和 响应式设计

（4）实现数据与结构的分离 高效轻便 易于浏览器的加载速度

写 React / Vue 项目时为何要在列表组件中写 key，其做用是什么？

"原地复用"不产生反作用的状况下，不用key效率最快

“原地复用”产生反作用，须要用key，且用key经过map查找比遍历查找效率更快

用key的主要做用是不产生反作用，跟不用key去比效率就没意义了，不是一个层面上的事，效率较快是和遍历查找相比而言

在 Vue 中，子组件为什么不能够修改父组件传递的 Prop，若是修改了，Vue 是如何监控到属性的修改并给出警告的。

1. 子组件为什么不能够修改父组件传递的 Prop
   单向数据流，易于监测数据的流动，出现了错误能够更加迅速的定位到错误发生的位置。
2. 若是修改了，Vue 是如何监控到属性的修改并给出警告的。

Vue 的父组件和子组件生命周期钩子执行顺序是什么

1. 加载渲染过程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程
   父beforeUpdate->父updated
4. 销毁过程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed