前言

为了调试Auth后端，写了一个Vue的前端，结合以前写的文章，对Vue为代表的前端做一个总结，内容分为：

• Control
• View与Data
• Element组件
• CSS

本文是总结View与Data的使用，这也是前端的核心

• 前端一般步骤

  切分 => 数据 => 封装 => 性能

  切分：是将页面切分成各个小组件

  数据：根据各个小组件的交互情况，选择数据定义的位置，一起它们之间交互的方式

  封装：封装值得是无状态的组件，可以被用在很多其他的位置，如各个组件库

  性能：包括对数据的缓存、组件的渲染性能等等

• 前端标准

  页面优雅、性能最佳

除此，这里我想总结2点：页面切分 与 View与Data互动机制。

页面切分

切分的基础，如一张图就可以很好的表达：

页面切分主要看数据，数据如果较为独立，应该进行切分。若不怎么独立，切分会带来子组件与父组件频繁的交互，并不好。

• 数据定义的位置

  可以采用最小父节点法：从叶子节点往跟根节点，若在本节点可以，则数据在本节点，不可以再往上一层。

• 关于状态

  并不是所有状态都应该放到store中，store本质上是一块全局数据区，只有被多个组件用到的时候，才适合存到store中。

  在store中，若调用异步的api接口，需要在action中进行。若不需要存store，可以在method中，调用api接口。

View与Data互动机制

View与Data是整个显示的二元基本要素，在写Pixi画图时，能够明显觉察到这样一种机制：

Action => Change => View

Action是事件，包括视图操作事件、生命周期Hook、后端事件，它是一种触发。

Change是对数据的变化，当Action触发后，对相应的数据进行变化，计算出结果。

View是对结果的一种显示，也就是<template> 等具体的内容。

这个互动机制与Vuex(redux)等是一致的：

先定义State(Data)，再定义Action(事件)，再定义Mutations(改变)