Vue题1

MVVM

Model：数据层

View：视图层，即用户界面

ViemModel:视图数据层，MVVM的核心，主要把Model数据转换进行第二次封装，达到View符合的视图数据模型，ViewModel所封装出来的数据模型包括视图的状态和行为，而Model层的数据模型只有状态，即页面这一块展示什么视图，那一块展示什么视图，而页面加载进来后显示的和点击时发生的就属于视图行为（交互），行为和状态都封装在ViewModel数据模型中，这样就可以实现双向数据绑定，我们只需要去维护ViewModel，不用再去操纵DOM更新视图

MVVM优点

可以实现单向数据绑定和双向数据绑定

单向数据绑定：更新ViewModel时，视图也更新

双向数据绑定：在单向数据绑定的基础上，View变化，ViewModel变化也进行变化

缺点：

1.对于双向数据绑定，当看到视图出现异常时，不能确定是View出现BUG还是Model出现BUG

2.对于大型Model，长时间持有会造成浪费内存

3.对于大型图形应用程序，视图较多，构建和维护ViewModel的成本也会提高

Vue生命周期

Vue实例有一个完整的生命周期，从开始创建、初始化数据，编译模板，挂载DOM->渲染，更新->渲染，卸载等一系列过程，成为Vue的生命周期

beforeCreate、create、beforeMounted、mounted、beforeUpdate、updata、activited、deactivited、beforeDestory、destoryed

在第一次创建页面时会用到的钩子

beforeCreate、create、beforeMounted、mounted

钩子	时间
beforeCreate	创建前，实例初始化后，还不能获得Dom节点,data、computed.watch、methods上的方法和数据都还不能访问，可以加载loading事件
created	创建后，实例已经创建，完成数据初始化，导入依赖，Loading加载完成，可以进行异步请求(过多会导致白屏时间过长)，未挂在DOM，若想操作DOM需要用Vue.nextTick()
beforeMounte	挂在前，虽然得不到具体DOM，但是vue挂载根节点已创建，
mounted	完成挂载DOM和渲染，可以对挂载的DOM进行操作，
beforeUpdata	数据更新前，数据驱动DOM
updata	数据更新后，完成虚拟DOM的重新渲染
activated	在使用vue-route时，会使用<keep-alive></keep-alive>来缓存组件状态，created就不会重复调用
deactivated	<keep-alive></keep-alive>组件被移除时用
beforeDestory	销毁前，可以做一些提示
destory	销毁，组件被删除

异步请求适合在哪个周期?

官方是在mounted，实际也可以在created生命周期调用

vue组件如何进行通信?

1、props/$emit+v-on:通过props自上而下进行数据传递，通过$emit+v-on向上传递信息

2、$children、$parent：不常用

3、provide/inject:vue2.2.0新增api,父组件通过provide提供变量，子组件通过inject注入变量


4、ref/refs:在普通DOM上指向DOM元素，在子组件使用，指向组件实例，可以通过实例直接调用组件的方法或访问数据

5、EventBus:通过EventBus进行信息的发布和订阅

6、vuex：全局数据管理库，管理数据流

7.localstorage/sessionStorage:数据比较混乱不容易维护

8、$attrs/$listeners:在vue2.4中加入$attrs和$listeners进行跨级通信

总结; 父子之间：props; parent;provide/inject;ref;listeners

兄弟之间：vuex;eventBus

跨级:vuex;$attrs/$listeners;eventBus;provide/inject