前言
为了调试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(改变)