前言
如何在vue中写出高质量可维护代码,减少我们写代码的时间，让我们去谈女朋友！
例子
我们以一个菜单的案例展开，先来看一个平常程序员怎么常规的vue文件如何写？
以element-ui为基础组件的部分代码
菜单1
菜单2
菜单3
菜单4
这就是大多数人们写的代码，有着大量的重复代码，而且难以高效的维护，如果老板让再加10个菜单，他就会ctrl+c/ctrl+v复制10个出来，代码简直是成了一个大坑。
数据驱动视图
（数据+模版=视图）
我们分析代码发现有很多重复的部分，无疑是改变了几个关键的信息
图标
标题
背景色
点击事件
其他参数
我们把上述的参数具体为了一个对象数组，也就是我们说的(数据层)
[
{
title:'菜单1'，
icon:'icon-caidan1',
event:'event1,
style:{
backgroundColor:'color1'
color:'color1'
}
}
...
]
我们想想如果用循环的方式遍历这个数组对象，把相关的关键内容填充到相应的位置，换言之就是插入到我们的卡槽中,我们接下来构建我们的卡槽(模版层)
接下来我们写goLink和loadStyle，逻辑写起来比较简单
...
event1(item){ //每一个菜单对应的事件逻辑},
...
goLink(item){ this[item.event](item);
},
loadStyle(item){ const style = item.style; return {
backgroundColor:style.backgroundColor,
color:style.color,
}
}
list就是我们前面构建的数组对象
goLink我们点击事件的处理方法，并将item当前数据对象传入方法
loadStyle我们样式加载处理方法
接下来我们将数据和模版组合到一起就呈现我们看到的视图了，从而达到了数据驱动视图的质量高、维护性高的优点
再接着我们上面的老板的需求，让我们加10个20个都不用去写重复代码，只要在数据数组中配置好要加的东西即可
是不是很方便,点击下面的例子看完整代码
总结
数据驱动视图的思想写起来可以省去大量的代码，并且维护起来也方便，文章中我们用的是json数据，你也可以用其他的数据格式，如xml等。avue就是这样思想的项目，大家有兴趣可以看看
原文作者: Smallwei小伟
原文链接:https://my.oschina.net/sunshineS/blog/1860145
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3355/viewspace-2805317/ ，如需转载，请注明出处，否则将追究法律责任。
