框架 (vue/angular/react)

react与vue的区别

vue使用的是template模版编写。react使用的是jsx语法。

状态管理：react中的状态全部存入state中，通常修改的时候需要用到setState方法来更新状态。 vue中的state对象不是必须，vue是通过data属性在vue对象中进行管理

监听数据的变化，vue劫持一些函数，能精确的知道数据变化。react中默认是通过比较引用的方式去进行，如果不优化使用shouldComponentUpdate/PureComponent方法优化，那会导致大量的虚拟dom重新渲染

数据流不同：vue可以进行组件与dom之间v-modle双向绑定。react从始至终都只有单向数据流.

官方推荐使用的ui库不同;

MVC、MVVM区别

MVC
我们需要数据所以有了M，我们需要界面所以有了V，而我们需要找一个地方把M赋值给V来显示，所以有了C;
MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。
View（视图）：是应用程序中处理数据显示的部分。
Controller（控制器）：是应用程序中处理用户交互的部分。

MVVM
它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

ViewModel(视图模型)是mvvm模式的核心，它是连接view和model的桥梁;

MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

vue双向数据绑定的原理是什么

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

vuex的作用？

vuex是一个专门为vue.js应用程序开发的状态管理模式
vuex可以帮助我们管理共享状态，也就是管理全局变量
vuex的几个核心概念：
vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性

state:state意为'状态'，是vuex状态管理的数据源

getter:getter的作用与filters有一些相似，可以将state进行过滤后输出

mutation:mutation是vuex中改变state的唯一途径，并且只能同步操作

action:一些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态

module:当store对象过于庞大时，可以根据具体的业务需求分为多个module

我们可以在组件中dispatch()触发 Action，Action 则会commit()提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

获取module中对应属性的值
this.$store.dispatch('vip/vip', {}, {root: true}) true表示不再当前模块
this.$store.commit('xxx/xxxx',{}) ;
this.$store.getters['xxx/xxx'];
this.$store.state.moduleA.testNum1;

Vue的生命周期 ( 八 + 二 <配合keep-alive标签> )

beforeCreate (在实例初始化之前调用)

 beforeCreate() {
    console.log('实例初始化前',this.a);
 },

created (在实例初始化之后调用，经常用于操作数据，发起ajax请求)

created() {
    console.log('实例初始化后',this.a);
},

beforeMount (在挂载开始之前被调用，如果是在服务器端渲染时不被调用,在这个函数里，无法获取元素)

beforeMount() {
   console.log('vue挂载前',this.$refs['box']);
   //vue挂载前 undefined
},

mounted　(在挂载后被调用，也不能在服务器端渲染时被调用,这个函数里，是可以获取元素，并进行操作的)

mounted() {
   console.log('vue挂载后',this.$refs['box']);
   //vue挂载后 <div id="box">…</div>
},

beforeUpdate (视图层数据更新前调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM)

  beforeUpdate() {
     console.log('视图更新前',this.$refs.span.innerHTML);
  },

updated (视图层数据更新后调用)

updated() {
    console.log('视图更新后',this.$refs.span.innerHTML);
},

beforeDestroy (实例销毁之前调用，在被销毁的组件中进行调用,有一些操作，会在实例已经销毁的时候还在运行，这时候为了性能考虑，就在这里结束哪些操作)

beforeDestroy() {
    console.log('实例销毁前');
 },

destroyed( 实例销毁后调用。)

destroyed() {
      console.log('实例销毁后');
},

activated和deactivated配合keep-alive标签使用

<button @click='flag =! flag' ref="flag">点击销毁</button>          
<keep-alive>
     <cmpsize v-if='flag'></cmpsize>
</keep-alive>

activated(用beforeDestroy和destroyed的话在销毁后再次出现的话,就太浪费性能了===> 所以实例被激活时使用，用于重复激活一个实例的时候)

activated(){  
      console.log('实例被激活时');
 },

deactivated(实例没有被激活时，)

dactivated(){  
      console.log('实例没有被激活时');
 },

vue路由的钩子函数

都是3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

全局路由钩子 : router.beforeEach(to，from，next); router.afterEach(to，from，next)

路由表里 : brfortEnter(to，from，next)

组件内 : brfortRouteEnter(to，from，next) ;beforeRouteUpdate(to，from，next); brfortRouteLeave(to，from，next);

vue组件之间的传递

父级传递子级：
首先在子组件上加一个v-bind:自定义属性,等于父级的数据，子组件通过props方法接收数据

子级传递父级：
在子组件内部使用$emit输出一个自定义事件，this.$emit('自定义事件名',参数)
在使用子组件时标签上绑定这个自定义事件，并且传入父级的“事件”处理函数

vuex 数据共享

eventBus 事件总线

vue中computed和watch的区别

computed能够监听vue数据上的变化，页面上来就执行一次，每改变一次数据就又触发，在操作数据的时候，会派生出另一个事情
watch当指定数据发生变化时候触发。一开始不会触发，只有指定的数据发生变化就又触发一次
watch可以deep深度添加，computed不可以

对vue中nextTick的理解

vue中nextTick可以拿到更新后的DOM元素
如果在mounted下不能准确拿到DOM元素，可以使用nextTick
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

渲染项目列表时，“key” 属性的作用和重要性是什么？

key 的作用主要是为了实现高效的更新虚拟 DOM，提高diff算法性能。其原理是vue在patch的过程中通过key可以精准的判断两个节点是否是同一个，从而避免频繁的更新元素，使得整个patch过程更加高效，减少DOM操作量，提高性能 , 不用的话会有影藏bug.