前端总结之View与Data

前言

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

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×