# Vue

Vue 是一套用于构建用户界面的渐进式 MVVM 框架。
特点： 声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持

# 基本概念

# 1、什么是 MVVM 框架

Model-View-ViewModel 模式

# Model 层

对应数据层的域模型，主要做域模型的同步。通过 Ajax 等 API 完成客户端和服务端的 model 数据同步。

# View 层

作为视图模版存在，在 MVVM 的中属于一个动态模版，主要负责定义结构、页面布局和 ViewModel 层数据和状态的展示，还包括事件的声明、数据绑定的声明、指令的声明。

# ViewModel 层

为 View 层提供数据，并对 View 层声明的事件、数据绑定、指令进行负责，处理 View 层具体业务逻辑，绑定监听属性，获取 Model 层数据,进行实时数据更新，实现 Model-View 数据双向绑定。

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

# 2、生命周期

创建——挂载——渲染——销毁

各生命周期作用

# 3、单向数据流和组件通讯

# 单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

# 常见的组件通讯方式

1、props / $emit

通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。

2、$children / $parent

通过$parent和$children就可以访问组件的所有方法和data，$parent拿到的是一个对象， $children拿到的是一个数组

3、provide/ inject

父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据,只能进行自上而下的单向流传递。

4、$attrs/$listeners

$attrs用于获取父作用域中的所有属性，$listeners用于监听父作用域中的所有事件。可以进行跨级的组件通信

5、EventBus

通过EventBus进行信息的发布与订阅，eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

6、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，主要解决多视图依赖同一状态或多视图更改同一状态的问题。

Vuex各个模块

state：用于数据的存储，是store中的唯一数据源
getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件
actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

7、ref / refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据

8、localStorage / sessionStorage

传统解决方案