lmk123 / blog

个人技术博客,博文写在 Issues 里。
https://github.com/lmk123/blog/issues
625 stars 35 forks source link

你好,Vue.js #26

Open lmk123 opened 8 years ago

lmk123 commented 8 years ago

第一次知道 Vue.js 是在一个技术群里。按照我的习惯,凡是我没听说过的东西我都会谷歌一下。当时它还没有发布 1.0 正式版(我的另一习惯是只用稳定版),又发现它跟 AngularJS 差不多,所以只是给了颗 Star,然后就干别的去了。

最近因为开发划词翻译 v6.0 的关系,我准备在里面用到我熟悉的 AngularJS 来写一些交互很多的页面,可是想了一下,唯一需要交互的页面就是设置页,为此我要引入 AngularJS 这个“大胖子”,那“性价比”太低了。

随后我就想到了 Vue.js,现在(2015年11月11日)它已经有 9361 个 Star 了,距离我标星的时候(2015年6月26日)涨了近 4000 颗,同时也发布了 1.0 版。我想,是时候深入了解一下它了。

写这篇博文时我刚看完 Vue.js Guide。看完之后,我的感受就是:它真的很简单。想当初学习 AngularJS 的时候我还买了一本书(《AngularJS 权威指南》),看了一个星期才敢用在项目里,而看完 Vue.js 的 Guide 前后不超过一个小时,我就觉得我已经完全理解了它、立刻就能用在项目里了。

AngularJS 里那些让人眼花缭乱的概念(控制器、作用域、模块、指令等等),我到现在也不敢说完全理解了,用起来还是心有戚戚焉,怕随着项目一天天复杂起来,往后会碰到一些不知道的坑,要用各种 "hacks" 才能解决,让项目变得不利于维护;但 Vue.js 唯一需要睁大眼睛看的就是 Reactivity in Depth 这一节。

最后看完 Comparison with Other Frameworks 之后,我更加认同了 Vue.js 的设计理念。没有 AngularJS 的脏值检测,没有 React 的“虚拟 DOM”的奇怪概念(我最受不了的就是它要把 html 写在 js 里),我越来越喜欢它了!

现在我期待的就是 vue-router 能尽快发布稳定版,那我以后可能就不会用 AngularJS 了~

yiluxin commented 8 years ago

Vue.js的作者工作于Meteor,现在负责开发meteor的前端框架Blaze..

lmk123 commented 8 years ago

@yiluxin 你是说 meteor/blaze?这个项目最后一次更新是两年前了

SiZapPaaiGwat commented 8 years ago

两个星期之前对react和你一样的感觉,不过我现在却越来越喜欢它了。 Vue.js我没正式用过,但是我用过的和它差不多的RactiveJS以及RegularJS。 Vuejs的作者自己也说过开发vue的时候参考过ractive。 RactiveJS我用了一年多了,项目组件也写了不少。 但是最近我们准备迁移到React,所以对相关组件进行了重写。 我个人的观点就是MVVM类的框架迟早要被双向绑定和组件化拖死,我抛弃Ractive就是因为这两点。

lmk123 commented 8 years ago

@simongfxu Vue.js 不是 MVVM 框架,它是 MVVM 中的 VM 层。react 我没用过,但我猜它的定位也是 VM 层吧?所以我觉得 Vue.js 和 react 的功能是相同的,只是实现的方式不同,不知道我的理解对不对 :)

SiZapPaaiGwat commented 8 years ago

你的理解不对。React只是个View库,连框架都算不上。React做数据管理官方推荐的一种理念叫Flux,Flux的实现有很多种,最著名的就是Redux,这个东西绝对屌屌的。 其实先抛开这些什么设计思想啊、理念什么的,作为使用者我来说下我的最直观的使用感受。 1)成也双向绑定,败也双向绑定 双向绑定看起来很美好,但是其实它是非常复杂的。其它库我不清楚,但是Ractive这个库的我遇见的大部分BUG都跟双向绑定有关。然后看github issue,跟双向绑定的bug也不少,基本上总会有。 而React的设计思想就是倾向单向数据流,双向绑定只在很少情况下出现,比如在有交互的表单上等。 这也间接导致React的bug很少。 2)组件化 React的组件化真正的做到了颗粒化的高度抽象级别,以至于有人说用它写代码会写出很多一次性的组件。但是真是这种思想让你能够使用颗粒化的组件拼积木一样拼凑起更复杂的大型组件。更巧妙的在于React的组件实现的非常cool,组件嵌套非常自然,比其他mvvm框架要先进不少。在Ractive中好多难以实现的东西或者需要调用API的东西在React中变的非常自然。所以MVVM框架只能不断的拼命加feature,然后拼命地解决bug。 3)双向绑定与组件嵌套 不得不说我在Ractive中遇到最难以解决bug的时候就是这一点了,组件内外数据双向绑定,双向流动。有的时候数据到了另一个组件却发现不一样,如果组件嵌套层级够深,debug起来简直就是噩梦。而React的单向数据流动却非常容易发现问题出在哪一个环节。 其实React我也还是个新手,我推荐你花时间看下,顺便广告下我写的demo

lmk123 commented 8 years ago

@simongfxu 果然流行的技术还是得学,不然都跟不上时代了。只是你说的这三点,在我看来 Vue.js 也都能做到,待我试试 react 再来比较一下这两者使用起来哪个手感要好一些

yiluxin commented 8 years ago

@lmk123 blaze是很久不更新了,之前负责blaze的人也辞职了,现在尤雨溪现在开始负责这部分,坐等新版blaze

Folyd commented 8 years ago

请问你的chrome插件用的是vue.js CSP 版本的吗?

lmk123 commented 8 years ago

@Folyd 不,使用的是正常版本,因为我在使用 CSP 版本的时候出现了莫名其妙的错误。

Folyd commented 8 years ago

有些环境,如 Google Chrome Apps,强制应用内容安全策略 (CSP) ,不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。

那正常版本怎样处理这个问题?

lmk123 commented 8 years ago

放宽内容安全策略。

https://github.com/lmk123/crx-selection-translate/blob/master/src/manifest.json#L7

官方文档:https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-eval

Folyd commented 8 years ago

太赞了,非常感谢博主