Vue治理地条理化 / 网络研习社#40

三权分立

不同于早期html的混乱状态（所有的代码都挤在一起），Vue提供了一种清晰地治理方式。如上图所示，一个页面被分成三块：前端模板 、业务逻辑和显示样式，将功能分区治理。联系我的上一篇文章《Vue用法的城市化比喻》，前端设计越加贴近人的真实思维方式，和现实中的治理有异曲同工之妙。

数据中心–data

Vue不提倡自带数据，它希望所有的数据都在一起管理，这个就是data的作用。如上图所示，前端要获取数据，直接使用插值表达式 {{ msg }} 这样来获取就可以了。在业务逻辑中 使用this.msg这样来获取。这样集中管理数据会有很多设计上的便利性。

行政中心–methods

1
2
3
4
5

methods:{
     setMessage(){
       this.msg = 'this is a big thing';
     }
 }

所有的业务逻辑都被安放在methods中，你想要做什么通过它们就可以了，类似于行政中心。

市长印章–this

因为数据和函数都有所谓的作用域，之间是不能互相通信的，也 就是说 B函数不能调用A函数中的数据。如果要相互调用应该怎么办呢？

我们在生活中都有经验，身份证要有效必须要盖上无数个章，这使得它有合适的法理性。同理，数据或函数要在任意地方被调用，也必须具备法理性，这个法理性就是加上this，我们可以形象地把它看为市长印章，我们要在哪里调用，直接加个this就可以了，比如这样：this.msg , this.func。

当然，还有其它地治理，这里先提这么多，大家可以自行拓展。

This page is synchronized from the post: ‘Vue治理地条理化 / 网络研习社#40’