Vue学习笔记

（一）什么是MVVM

是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

（二）Vue数据双向绑定原理

Vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的。

通过数据劫持和发布-订阅者功能来实现数据双向绑定

实现步骤：

（1）实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

（2）实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

（3）实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

（三）Vue生命周期函数

Vue的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关。

        

（四）VueX状态管理内容

（1）state：存储状态（变量）。

（2）getters：对数据获取之前的再次编译，可以理解为state的计算属性。

（3）mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。

（4）actions：异步操作。在组件中使用是$store.dispath('')。

（5）modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

（五）VueX中actions和mutations的区别

actions：

（1）用于通过提交mutation改变数据

（2）会默认将自身封装为一个Promise

（3）可以包含任意的异步操作

mutations：

（1）通过提交commit改变数据

（2）只是一个单纯的函数

（3）不要使用异步操作，异步操作会导致变量不能追踪

（六）import {} 和 import {} from {}的区别

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import语句会执行所加载的模块，因此可以有import 'lodash';的写法。此代码仅仅执行lodash模块，但是不输入任何值。

如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

（七）Mockjs

Mock.mock(url,‘post’ function(options))

有时候需要根据不同的请求参数来返回不同的内容，需要从function中拿数据，参数从哪里获取要根据实际情况来：

如果是GET请求，那么要从options.url里面拿，然后自己解析出来；
如果是普通的POST请求，那么要从options.body里面拿，然后自己解析；
如果参数是JSON格式并且是POST，那么要从options.body里面拿，然后JSON.parse()再获取；

项目源代码：https://github.com/haidilaohotpot/ffcs/tree/master/%E8%AF%BE%E9%A2%98%E5%9B%9B