西西河

主题:【原创】菜鸟初学 Vue js,之一,为什么是它 -- 铁手

共:💬1 🌺17
全看分页树展 · 主题
家园 【原创】菜鸟初学 Vue js,之一,为什么是它

最近决定西西河的前端主要用 Vue来实现一些效果。在决定之前有一些利弊权衡,做过一些比较,大致学习了一些东西。现在属于边学边用。写这个系列,一来是希望能得到一些指点,二来也算是给其他人一个不同的学习角度。

对于我来说,我没法先把一个系统完全搞明白,然后再来设计规划,完全利用一个系统的各种特性。我能做的,无非是在现有的体系里,做部分的修改,而这些需要修改的地方,就需要利用新的系统,比如 Vue 来提供解决的方案。我看过不少 Vue 的网络文章,包括它自己的极其优秀的文档,很多东西当时看的时候都觉得很棒,也能理解,但是到了我需要具体解决某个问题的时候,就往往抓了瞎,要琢磨半天。绝大多数的网络文章或教材,都是高手写出来的,就很容易忽略菜鸟比如我现在,所面临的问题。

其实我最早很中意的,不是 Vue,而是 Polymer。主要原因之一就是 component 组件的封装和定义,乍看也很容易上手。Recat 我瞄了几眼,感觉不顺,有难度。Angular太粗重,看上去也很复杂。Vue 和 Polymer 很类似,我看上去也很顺眼,特别是它的文档做的的确好,初步上手解释的非常清楚。对我来说,更重要的是,整个系统不需要从头开始,想要在现有系统上修改就可以直接上手。只可惜 Polymer 生在了 google 家,而 google 似乎主要是 Angular。更何况,三大巨头常见,四大巨头很少,所以 polymer 目前来看,只能是多保重了。

采用 Vue 的另外一个原因,是内心里多少希望多一些选择的存在,多一些竞争的存在,是推动前进的动力。react 有 facebook 为后台,angular 有google 为后台,Vue 基本上属于个人+社区为基本,支持一下,无论大小程度,我觉得长远是有益的。以后我会找机会吐槽一些因为一家独大所导致的拉后腿现象。

当然,采用 Vue,也是因为它技术上的特性。我个人比较喜欢以功能为基础的封装,而不是因为是 javascript 所以 javascript 要在一起,css 只和 css在一起,html 只和 html 在一起。我也对过于复杂或庞大的前端有莫名的恐惧。

用户访问一个网站,查看某个页面,他只关心点击了一个链接后,内容是不是很快就显示出来了。从网站的角度来考虑,需要关心服务器的性能,需要考虑有多少人访问,有多少人同时在访问,捎带要考虑客户端的性能,中间的代理缓存,还要考虑网站的内容能不能被搜索引擎检索,等等。有时候就需要综合考虑,哪些工作放在哪里,平衡性能,最后总体上达到一定程度的优化。

从西西河的角度,对考虑因素的重要程度我是这么排的:

1、搜索引擎检索的友善程度

2、网页缓存性能

3、网页显示及部分动态效果

基本上就是主要内容文本显示,每个内容页面尽可能长期缓存,通过 Vue 来实现前端的一些动态效果,及必要时能够对部分内容进行更新。

现在说说菜鸟初入门对 Vue 的理解。以往用 javascript,是直接对网页元素进行操作,要自己去获得数据,自己定位,然后自己操作。以 分页 查看为例子,如果需要在当前页面下增添下一页的内容,需要去取得下一页的内容,然后找到需要添加的位置,然后添加内容进去。Vue 的基本概念是你定显示的模板,你组织数据,我来干这些定位、添加、显示的事情。更方便的是,只要数据有更新,Vue 就会自动帮你显示这些变化。

在 Vue 中,我认为一个很重要的概念是 component,组件。组件相当于积木,在合适的地方都可以搭一搭。网页中需要一个 root instance,这个 instance 本身也可以看作是一个大的组件,里面可以包含其他组件。所有的组件都是挂靠在某个 html tag 上。这点理解我觉得很重要,对于组件里的 模板 设定,以及一些其他的功能的理解会有帮助。

不同于一般的 html tag,Vue 的组件是活的,它有自己的数据,模板和逻辑,能够从外面接收数据,也能往外面送数据。Vue推荐的做法是,从上往下用 props 接收数据,从下往上通过自定义 event 来向外传递消息。root instance 是所有组件的灵魂,是中央调控。这样设定的好处是,重要的逻辑和数据可以集中在 root instance那里,组件之间能够尽量相互隔离,各自专心干自己的事情,可以避免数据乱窜的现象。

关键词(Tags): #Vue#Vue js通宝推:mezhan,
全看分页树展 · 主题


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河