Vue.js基础

浅谈vue：

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。并且作者是华人的关系，Vue拥有着对华人开发者最友好的api文档和官方教程

谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者

• Model：代表数据模型，数据和业务处理都在Model层中定义
• View：代表UI视图层，负责数据的展示
• ViewModel：负责监听Model中数据的改变并且控制视图层的更新，处理用户交互操作
• Model和View并无直接关系，而是通过ViewModel来进行联系的，Model和ViewModel有着双向数据绑定的联系。因此当Model中数据发生改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步
• 这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对
  数据的维护操作即可，而不需要自己操作dom。

Vue全家桶

概括起来就是：1.项目构建工具（） 2.路由（vue-router）3.状态管理（vuex）4.http请求工具（axios：是一个http请求的包）

• vue-cli：使用vue-cli生成最基本的vue项目
• vue-router：vue项目中路由管理插件
• vuex：vue项目中的状态管理模式，也可以理解为vue项目中的数据管理者，当应用足够简单时，可以使用global event bus（全局事件总线）替代
• axios：vue项目中发起http请求的插件，类似于jquery中的ajax，

Vue生命周期

• beforeCreate：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
• created：在 created 中，data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
• beforeMount：这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
• mounted：这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了；注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
• beforeUpdate：执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
• updated：updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
• boforeDestory：当执行beforeDestory钩子函数的时候，Vue实例从运行阶段进入到销毁阶段；实例身上的data和methods、指令、过滤器都是处于可用的状态，还没有真正被销毁
• destoryed：当执行的到的destoryed函数的时候，组件已经被完全销毁，此时组件中数据 、方法、指令、过滤器都是不可以用的

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

key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。
vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。
在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言。map 映射的速度更快。

v-if和v-show

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

父子组件中的传值

• 父组件可以在引用子组件的时候通过（v-bind）属性绑定的形式把需要传递给子组件的数据 通过属性绑定的形式 的传递给子组件 共子组件内部使用
• 父组件相信子组件传递方法使用的是事件绑定机制 v-on