每日学习计划（Vue）

1、对MVVM架构的理解？

• Model层：表示数据模型。

• View层：表示UI组件，用于视图展示。

• ViewModel：监听数据模型的状态改变和控制视图的展示，VM通过双向数据绑定，将View层和Model层连接起来，所以当数据状态改变后视图会自动更新，无需人为干涉，因此使用MVVM可以令开发者更注重业务逻辑的开发，而不需要去手动操作DOM和关注数据状态的同步问题，复杂的数据状态维护交由MVVM统一管理。

2、对Vue生命周期的理解？

什么是生命周期？

一个组件从开始创建，初始化数据，编译模板，挂载DOM，渲染，等待更新，重新渲染，销毁等一系列过程，称之为生命周期。

Vue组件的生命周期

生命周期函数	生命周期描述
beforeCreate（创建前）	组件实例刚刚创建好，此时实例中还没有进行成员提升
created（创建后）	组件实例已经提升成员，此时还没有进行页面渲染
beforeMount（挂载前）	组件已编译好渲染模板，即将进行渲染
mounted（挂载后）	组件已完成渲染，界面已经可见
beforeUpdate（更新前）	组件实例中的数据是新的，但是界面还是旧的
updated（更新后）	此时数据和界面都是最新的
beforeDestroy（销毁前）	组件即将销毁
destroyed（销毁后）	组件已经销毁

被keep-alive缓存的组件

生命周期函数	生命周期描述
activated（触发前）	当被keep-alive缓存的组件激活时调用
deactivated（触发后）	当被keep-alive缓存的组件停用时调用

3、Vue异步请求适合在哪个生命周期中调用？

一般来说，Vue的异步请求可以在created和mounted中发送。如果在考虑效率问题的情况下，大部分时候会在created中进行请求。因为在mounted中发送请求会造成二次渲染。

1. created生命周期的使用场景：一个页面的首次渲染来自于服务器端（SSR）
2. created异步请求的优点：
   （1）能更快的获取服务端数据，减少页面Loading时间。
   （2）created支持SSR，mounted不支持SSR。

4、Vue组件之间如何通信？

父传子通信：

1. props：一层一层传递下去
2. $attrs：接收除了props声明外的所有绑定属性（class，style除外）
3. $parent / $root：获取父/根作用域上下文
4. provide / inject：导出注入方式，主要在开发高阶插件/组件库时使用。

---

子传父通信：

1. $children：获取直接子组件的作用域上下文
2. $refs：引用ref属性注册过的组件实例

---

组件事件通信：

1. $emit：触发某个父作用域传递的事件（包括自定义事件）
2. $listeners：获取父作用域传递的全部事件（包括自定义事件）
3. event bus（事件总线）：通过一个全局bus注册触发事件

---

全局共享数据通信

1. Vuex：使用仓库来管理大量，复杂的组件间共享数据

// 代码演示：
// 1. props：一层一层传递数据
/*
<div id="app">
        <child_comp :title='title'></child_comp>
</div>
*/
var app = new Vue({
   
	el: '#app',
	data: {
   
		title: '传递给子组件的数据'