Vue用法的城市化比喻 / 网络研习社#39 by lemooljiang

View this thread on: hive.blog | peakd.com | ecency.com

cn · @lemooljiang · Oct 9 '19

$7.63

Vue用法的城市化比喻 / 网络研习社#39

![vue-city.jpg](https://cdn.steemitimages.com/DQmf66mcusHGKFi5o4LNeu6oxb3kYmdNEBBo9U4ymA5Ab68/vue-city.jpg)

App.vue是Vue生成的挂载在index上的实例，它是作为一个根容器，所有的页面都会渲染成一个页面（SPA）。用到现在，突然有点联想，这其实和一个城市的运作是何其的相似！

在上图中，大家可以感受下这个形象地比喻：都是一个独一无二的实例，都是分区治理，都有相似的理念和治理方法。比如下面这种一一对应的关系：
```
#App => 广州市
各个组件 => 分布的区域
div等节点 => 市民
data => 数据中心
methods => 行政中心
v-model => 绑定银行卡
this => 市长印章
```

这种对应还有更多地想像余地，关键是通过这种比喻可以形象地理解Vue的很多设计思想。

现在很多新的语言（比如python , golang），还有一些设计框架，都是在原有的基础上封装了对象的概念，这样就有更好的设计性和更好的理解性，因为人们就是这样理解世界的。而语言又是描述世界的工具，还原世界的面貌。所以，如果语言和世界有更好的相似性和想通性，就能更好地促进彼此地理解。

得益于最近学习Vue的一些心得，想到了一些形象化的比喻，我觉得还不错。后面还将有一些图示，明天补上。

👍 sweetsssj, rivalhw, lemooljiang, ace108, abit, laodr, ew-and-patterns, itchyfeetdonica, catwomanteresa, julian2013, htliao, nostalgic1212, annepink, dapeng, corsica, tvb, skenan, yellowbird, tipu, hqy, dancingapple, cn-reader, coindzs, kimzwarch, xiaoshancun, tengri, bullionstackers, bring, davidke20, idx, blc, mia-cc, archisteem, scisan, liangfengyouren, moneybaby, zmm, microlhy, ooairbb, alex2016, anomaly
👎 fesrty, carfemise, jixta

`author`	lemooljiang
`permlink`	vue-39
`category`	cn
`json_metadata`	{"tags":["cn","network-institute","vue","spa","this"],"image":["https://cdn.steemitimages.com/DQmf66mcusHGKFi5o4LNeu6oxb3kYmdNEBBo9U4ymA5Ab68/vue-city.jpg"],"app":"steemit/0.1","format":"markdown"}
`created`	2019-10-09 12:54:15
`last_update`	2019-10-09 12:54:15
`depth`	0
`children`	4
`last_payout`	2019-10-16 12:54:15
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	3.849 HBD
`curator_payout_value`	3.783 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	610
`author_reputation`	437,786,961,471,535
`root_title`	"Vue用法的城市化比喻 / 网络研习社#39"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	91,381,357
`net_rshares`	24,242,097,932,922
`author_curate_reward`	""

properties (23)vote details (44)

voter	rshares	pct
abit	346,246,677,541	100%
lemooljiang	809,634,157,180	100%
ace108	576,362,783,335	25%
alex2016	139,096,770	100%
bullionstackers	8,971,100,068	1%
rivalhw	2,038,272,925,694	100%
sweetsssj	19,305,152,844,453	50%
anomaly	109,497,099	1%
dapeng	39,612,725,687	100%
bring	6,752,854,306	100%
scisan	2,618,221,700	100%
laodr	193,042,443,939	100%
htliao	56,231,313,670	35%
ew-and-patterns	190,581,026,996	4%
corsica	39,313,570,525	100%
catwomanteresa	107,985,132,720	50%
liangfengyouren	2,321,354,403	50%
idx	6,551,589,237	100%
cn-reader	10,942,115,109	50%
tvb	33,652,046,668	50%
skenan	24,946,092,418	50%
tipu	19,157,125,124	0.02%
kimzwarch	10,560,299,658	5.5%
yellowbird	19,924,616,405	100%
davidke20	6,655,437,558	4%
dancingapple	11,976,987,249	50%
xiaoshancun	9,881,987,555	100%
blc	3,961,635,814	100%
hqy	18,343,686,934	100%
zmm	688,761,058	100%
itchyfeetdonica	148,991,721,736	30%
coindzs	10,660,983,659	100%
ooairbb	171,761,514	100%
nostalgic1212	51,923,616,549	52%
archisteem	3,518,974,318	7.5%
moneybaby	2,027,194,275	5%
julian2013	67,515,588,810	100%
annepink	43,148,106,209	80%
mia-cc	3,583,560,797	100%
microlhy	544,931,164	100%
carfemise	-8,192,035	-10%
fesrty	-9,527,540	-10%
tengri	9,444,227,129	3.96%
jixta	-5,120,536	-10%

@dailychina · Oct 11 '19

$0.05

!thumbup
  恭喜你！您的这篇文章入选 @justyy 今日 (2019-10-11) 榜单 [【优秀的文章】](https://steemit.com/cn/@justyy/--daily-cn-updates-cncnpower-downyy2019-10-11), 回复本条评论24小时内领赏，点赞本评论将支持 @dailychina 并增加将来您的奖赏。
 @justyy 是CN区的见证人，[请支持他，给他投票](https://steemconnect.com/sign/account_witness_vote?approve=1&witness=justyy)，或者设置justyy为[见证人代理](https://v2.steemconnect.com/sign/account-witness-proxy?proxy=justyy&approve=1)。感谢！@justyy的主要贡献：https://steemyy.com

Congratulations! This post has been selected by @justyy as today's (2019-10-11)  [【Good Posts】](https://steemit.com/cn/@justyy/--daily-cn-updates-cncnpower-downyy2019-10-11), Steem On!  Reply to this message in 24 hours to get rewards. Upvote this comment to support the @dailychina and increase your future rewards! ^_^

[SteemIt 工具、API接口、机器人和教程](https://steemyy.com/steemit-tools/)
[SteemIt Tools, Bots, APIs and Tutorial](https://SteemYY.com)<hr>
If you believe what I am doing, please consider a spare vote voting me [here](https://steemconnect.com/sign/account_witness_vote?approve=1&witness=justyy), thank you very much indeed.

@justyy - the author of https://SteemYY.com and I have been a Steem Witness for [more than a year now.](https://steemit.com/witness-category/@justyy/one-year-winessversary-a-great-start)

👍 justyy, dailystats, dailychina, superbing, turtlegraphics, witnesstools, ilovecoding, steemfuckeos, happyukgo, dailyfortune, justsoso, cplusplus

`author`	dailychina
`permlink`	re-vue-39-20191011t080202
`category`	cn
`json_metadata`	""
`created`	2019-10-11 08:02:03
`last_update`	2019-10-11 08:02:03
`depth`	1
`children`	0
`last_payout`	2019-10-18 08:02:03
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.023 HBD
`curator_payout_value`	0.022 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,249
`author_reputation`	50,124,640,567,504
`root_title`	"Vue用法的城市化比喻 / 网络研习社#39"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	91,440,440
`net_rshares`	251,101,030,184
`author_curate_reward`	""

properties (23)vote details (12)

voter	rshares	pct
justyy	201,870,602,006	8%
happyukgo	493,212,783	25%
superbing	6,705,777,805	25%
dailyfortune	33,227,198	25%
dailystats	16,227,510,523	25%
dailychina	14,904,040,895	25%
turtlegraphics	3,066,254,266	25%
witnesstools	2,955,930,206	25%
ilovecoding	2,933,319,426	25%
steemfuckeos	1,911,155,076	25%
cplusplus	0	25%
justsoso	0	25%

@nostalgic1212 · Oct 9 '19

@tipu curate 0.02

Posted using [Partiko iOS](https://partiko.app/referral/nostalgic1212)

properties (22)

`author`	nostalgic1212
`permlink`	nostalgic1212-re-lemooljiang-vue-39-20191009t134400474z
`category`	cn
`json_metadata`	{"app":"partiko","client":"ios"}
`created`	2019-10-09 13:44:00
`last_update`	2019-10-09 13:44:00
`depth`	1
`children`	1
`last_payout`	2019-10-16 13:44:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	89
`author_reputation`	1,478,806,002,181,760
`root_title`	"Vue用法的城市化比喻 / 网络研习社#39"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	91,382,550
`net_rshares`	0

@tipu · Oct 9 '19

Upvoted &#128076;

properties (22)

`author`	tipu
`permlink`	re-nostalgic1212-re-lemooljiang-vue-39-20191009t134400474z-20191009t134427
`category`	cn
`json_metadata`	""
`created`	2019-10-09 13:44:30
`last_update`	2019-10-09 13:44:30
`depth`	2
`children`	0
`last_payout`	2019-10-16 13:44:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	17
`author_reputation`	55,911,178,531,114
`root_title`	"Vue用法的城市化比喻 / 网络研习社#39"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	91,382,570
`net_rshares`	0

@scisan · Oct 13 '19

$0.15

相当形象的呢

👍 lemooljiang

`author`	scisan
`permlink`	pzbl4w
`category`	cn
`json_metadata`	{"app":"steemit/0.1"}
`created`	2019-10-13 15:46:09
`last_update`	2019-10-13 15:46:09
`depth`	1
`children`	0
`last_payout`	2019-10-20 15:46:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.076 HBD
`curator_payout_value`	0.076 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	6
`author_reputation`	-1,481,395,934,280
`root_title`	"Vue用法的城市化比喻 / 网络研习社#39"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	91,516,173
`net_rshares`	798,842,320,335
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
lemooljiang	0 B		798,842,320,335	100%