把握格式的技巧，让前端页面摆脱冗余

以不变应万变是开发世界的制胜法宝，懂得把握这个道理，才能让前端页面免于坠入冗余的泥潭。

作为前端开发者，相信很多人都有这种经历：产品经理让你写一个页面，并且提供了一份数据，这份数据大概率需要做一些格式化的处理之后才能展现到页面上。使用UI框架，将数据通过JSON传给UI框架，让UI框架做格式化的处理，前端只需要写一个template模板，然后对着文档写一些自定义标签、配置下属性，通过后端给的接口获取数据填充上... 这就是最基本的配置，但Element-UI的Table组件本身还支持很多配置参数，这些配置若也在JSON中，也要正常作用。因此，template模板写法并不适用，或者说自由度… 不足。

一、组件内嵌套路

Vue框架中，组件的通信有子传父和父传子两种方式。组件内嵌既可以达成父组件往子组件传数据的目的，还可以减少父组件的渲染压力，当然我们通常最看重的还是提高子组件的复用率，但是，利用这种套路还可以避免数据维护的重复。

举个例子，很多项目都有轮播图，切换不同的广告图片或内容。通常做法是写一个轮播图组件，组件自身的状态与父组件的状态解耦，但子组件的图片是通过父组件的props传过去的。

这样一来，父组件就必须维护一个变量去储存子组件的图片列表，但列表中的某一个图片发生变动，就必须更新父组件的图片列表，再由父组件更新子组件的图片列表。

按照这种思路，组件内嵌的套路是怎么样的呢？

父组件维护一个图片列表，给子组件一个方法，让子组件来改变父组件的列表，子组件直接操作父组件的列表，这样一来，子组件的状态直接与父组件的状态耦合，使得父组件不再需要为了子组件而维护一个变量，子组件也无需通过父组件的props来更新数据。

二、函数式组件+状态提升

有很多UI框架都支持函数式组件，函数式组件的优势在于性能比普通组件高，开发成本相对也比较低。使用函数式组件的另一个好处是：可以轻松地实现组件间的通信。

除了函数式组件，状态提升也是一个提升组件复用率和代码性能的手段。

什么意思呢？例如一个列表页，为了实现无限加载的功能，页面会一直渲染新增的数据，那么页面的状态就会一直增加，这无形中给服务器增加了额外的压力。

使用函数式组件+状态提升，子组件就只需单纯的负责渲染数据，组件的数据通过函数提升到父组件，父组件负责数据的管理，提高子组件的复用率。

三、响应式对象+computed

computed是Vue中一个很强大的工具，用好computed可以大大提升代码的性能。

当组件的state发生变化，页面会重新渲染。响应式对象与computed的区别就在于：响应式对象依赖的是state，computed依赖的是state和computed本身，当computed本身发生变化时，页面会重新渲染，但当state发生变化时，页面不会重新渲染。

这样我们就可以根据这些特点，在合适的地方使用computed来提升代码的性能，减少页面渲染的次数。

在实际的项目开发中，这三个方法往往会结合使用，互相配合，发挥更大的作用。

当然，这只是前端页面布局的思路方法，除此之外，页面优化还有很多种方式，欢迎大家分享经验。