前端vue自学总结 Week01

一、UML图理解
1、类图

总结：主要用于描述类与类之间是静态关系，分成：类名（可以类比为js文件名），属性列表（类比为js文件中定义全局变量），方法列表（类比为js文件中方法）
2、序列图
序列图用于描述参与者之间的动态调用关系。每个参与者都有一条垂直向下的生命线，该生命线用虚线表示。参与者之间的消息按照从上到下的顺序表示它们的调用顺序关系，这就是序列图这个词的来源。每个生命线都有一个激活条，它是图中的细长矩形条，只有在参与者活动时才是激活的

总结：这些对象都是类对象，或者更大的参与者，只要是同一级别的都可以，画时序图最重要的是理清楚执行的顺序，（T：但是同步情况该怎么画？），还需观察某一对象生命的结束（何时开始，何时结束），动态关系

3、组件图

总结：比类更大的维度，一个组件中可能包含很多类，主要用于画模块设计。静态关系

4、部署图

总结：和服务器挂钩，包括需要部署的服务器数量、关键组件的部署位置等。它是软件系统最终呈现的物理蓝图，能够让客户、老板和工程师清晰地了解系统的最终运行状态，以及与现有系统和第三方服务器的关系。

5、用例图

总结：分成业务用例和系统用例，主要是分析该系统对外提供的能力。

6、状态图

总结：表示单个对象生命周期状态的变化，比如外卖订单，他可以有用户创建，用户付款，商家接单，骑手接单，待取货，配送中，配送超时，已签收等状态的变化，描述某一对象在不同时间的状态。

7、活动图

总结：主要是从系统和业务的维度描述发生的动态行为，帮助用户更好的理解系统运作

在需求分析阶段，我们可以使用用例图、活动图、时序图和简化的类图进行领域模型抽象和关系描述。

在架构设计阶段，通过组件图、组件时序图和部署图描述系统物理蓝图和模块关系。

在详细设计阶段，主要侧重于类图和类的时序图，而对于复杂的方法逻辑，可以使用方法的活动图进行描述。

二、源码

1、源码目录

任意打开一个vue项目，找到node_modules/vue文件，即可查看vue源码

未完待续...
(tips:分享可直接看源码的网站:UNPKG，浏览器地址栏直接输入：unpkg.com/vue@2.14.6，看到对应框架版本下的js文件)

个人总结：

学习态度复盘：自律性不强，每天学习时间还未固定，前两天很热血，后面几天进入下坡期，

学习进度复盘：大体过完了vue源码文件目录，不知道从什么方向开始看（有种无从下手的感受）

目标：先从网上找文章看，vue源码的层次，整理出来，然后挨个去看。实在不行会先找视频，先跟视频认识vue源码。

vue揭秘：前言 | Vue.js 技术揭秘