2019独角兽企业重金招聘Python工程师标准>>> 
前言
如何在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就是这样思想的项目，大家有兴趣可以看看
传送门