Vue.js 0.11.10 发布，JavaScript 库_综合_突袭网
当前位置&:&&&& Vue.js 0.11.10 发布，JavaScript 库
热门标签：
Vue.js 0.11.10 发布，JavaScript 库
来源：本网整理
编辑：章玉评论：
7月18日杭州OSC源创会正在报名，送机械键盘和开源无码内裤&&Vue.js0.11.10发布，此版本主要是修复了自定义元素组件不能使用v-repeat(#822)运行的回退问题。此版本现已提供下载：/yyx990803/vue/archive/0.11.10.zip。Vue.js是构建Web界面的JavaScript库，提供数据驱动的组件，...
Vue.js 0.11.10 发布，此版本主要是修复了自定义元素组件不能使用 v-repeat ()运行的回退问题。此版本现已提供下载：。Vue.js 是构建 Web 界面的 JavaScript 库，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。支持的浏览器：
硬件初创公司必须知道的3种重要商业模式
三个月内跌掉千亿市值的中科招商，为何成为新三板“妖股”
三星“承包”印度智能机市场：六月份额破四成
本网转载整理的最新文章
58同城CEO姚劲波今天在微博上表示，“今天注定是神奇的一天，上午我们宣布一个并购，下午我们发布一个新产品”。这个并购指的是传闻中的“中华英才网”。这将成为58...
昨天，打车应用“一号专车”和P2P平台“点融网”宣布双方将合作推出一号专车余额生息功能。此功能将在今天正式上线，满足条件的一号专车用户就可以享受余额生息产生的收...
众所周知，美国的中小学教育一向培养学生阅读能力十分看重，几乎每个学校都会要求学生每天留出一段时间做“自由阅读”。当GoogleClassroom和同类产品专注将...
Docker 1.6.1 发布，此版本更新内容如下： 安全 Fix read/write /proc paths (CVE-) Prohibit VOLUME /...
OGLplus 0.61.0 发布，此版本更新了 GL 版本检测，还有一些构建系统的改进；错误代码枚举和 OALplus 异常更新；GL ARB_clip_control 封装器；...Vue.js 源码学习笔记
最近饶有兴致的又把最新版
的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）
程序结构梳理
Vue.js 是一个非常典型的 MVVM 的程序结构，整个程序从最上层大概分为
全局设计：包括全局接口、默认选项等
vm 实例设计：包括接口设计 (vm 原型)、实例初始化过程设计 (vm 构造函数)
这里面大部分内容可以直接跟 Vue.js 的对应起来，但文档里面没有且值得一提的是构造函数的设计，下面是我摘出的构造函数最核心的工作内容。
整个实例初始化的过程中，重中之重就是把数据 (Model) 和视图 (View) 建立起关联关系。Vue.js 和诸多 MVVM 的思路是类似的，主要做了三件事：
通过 observer 对 data 进行了监听，并且提供订阅某个数据项的变化的能力
把 template 解析成一段 document fragment，然后解析其中的 directive，得到每一个 directive 所依赖的数据项及其更新方法。比如 v-text=&message& 被解析之后 (这里仅作示意，实际程序逻辑会更严谨而复杂)：
所依赖的数据项 this.$data.message，以及
相应的视图更新方法 node.textContent = this.$data.message
通过 watcher 把上述两部分结合起来，即把 directive 中的数据依赖订阅在对应数据的 observer 上，这样当数据变化的时候，就会触发 observer，进而触发相关依赖对应的视图更新方法，最后达到模板原本的关联效果。
所以整个 vm 的核心，就是如何实现 observer, directive (parser), watcher 这三样东西
文件结构梳理
Vue.js 源代码都存放在项目的 src 目录中，我们主要关注一下这个目录 (事实上 test/unit/specs 目录也值得一看，它是对应着每个源文件的测试用例)。
src 目录下有多个并列的文件夹，每个文件夹都是一部分独立而完整的程序设计。不过在我看来，这些目录之前也是有更立体的关系的：
首先是 api/* 目录，这几乎是最&上层&的接口封装，实际的实现都埋在了其它文件夹里
然后是 instance/init.js，如果大家希望自顶向下了解所有 Vue.js 的工作原理的话，建议从这个文件开始看起
instance/scope.js：数据初始化，相关的子程序 (目录) 有 observer/*、watcher.js、batcher.js，而 observer/dep.js 又是数据观察和视图依赖相关联的关键
instance/compile.js：视图初始化，相关的子程序 (目录) 有 compiler/*、directive.js、parsers/*
其它核心要素：directives/*、element-directives/*、filters/*、transition/*
当然还有 util/* 目录，工具方法集合，其实还有一个类似的 cache.js
最后是 config.js 默认配置项
篇幅有限，如果大家有意&通读& Vue.js 的话，个人建议顺着上面的整体介绍来阅读赏析。
接下来是一些自己觉得值得一提的代码细节
一些不容错过的代码/程序细节
this._eventsCount 是什么?
一开始看 instance/init.js 的时候，我立刻注意到一个细节，就是 this._eventsCount = {} 这句，后面还有注释
for $broadcast optimization
非常好奇，然后带着疑问继续看了下去，直到看到 api/events.js 中 $broadcast 方法的实现，才知道这是为了避免不必要的深度遍历：在有广播事件到来时，如果当前 vm 的 _eventsCount 为 0，则不必向其子 vm 继续传播该事件。而且这个文件稍后也有 _eventsCount 计数的实现方式。
这是一种很巧妙同时也可以在很多地方运用的性能优化方法。
数据更新的 diff 机制
前阵子有很多关于视图更新效率的讨论，我猜主要是因为 virtual dom 这个概念的提出而导致的吧。这次我详细看了一下 Vue.js 的相关实现原理。
实际上，视图更新效率的焦点问题主要在于大列表的更新和深层数据更新这两方面，而被热烈讨论的主要是前者 (后者是因为需求小还是没争议我就不得而知了)。所以这里着重介绍一下 directives/repeat.js 里对于列表更新的相关代码。
首先 diff(data, oldVms) 这个函数的注释对整个比对更新机制做了个简要的阐述，大概意思是先比较新旧两个列表的 vm 的数据的状态，然后差量更新 DOM。
第一步：便利新列表里的每一项，如果该项的 vm 之前就存在，则打一个 _reused 的标 (这个字段我一开始看 init.js 的时候也是困惑的&& 看到这里才明白意思)，如果不存在对应的 vm，则创建一个新的。
第二步：便利旧列表里的每一项，如果 _reused 的标没有被打上，则说明新列表里已经没有它了，就地销毁该 vm。
第三步：整理新的 vm 在视图里的顺序，同时还原之前打上的 _reused 标。就此列表更新完成。
顺带提一句 Vue.js 的元素过渡动画处理 (v-transition) 也设计得非常巧妙，感兴趣的自己看吧，就不展开介绍了
组件的 [keep-alive] 特性
Vue.js 为其组件设计了一个 [keep-alive] 的特性，如果这个特性存在，那么在组件被重复创建的时候，会通过缓存机制快速创建组件，以提升视图更新的性能。代码在 directives/component.js。
数据监听机制
如何监听某一个对象属性的变化呢？我们很容易想到 Object.defineProperty 这个 API，为此属性设计一个特殊的 getter/setter，然后在 setter 里触发一个函数，就可以达到监听的效果。
不过数组可能会有点麻烦，Vue.js 采取的是对几乎每一个可能改变数据的方法进行 prototype 更改：
但这个策略主要面临两个问题：
无法监听数据的 length，导致 arr.length 这样的数据改变无法被监听
通过角标更改数据，即类似 arr[2] = 1 这样的赋值操作，也无法被监听
为此 Vue.js 在文档中明确提示不建议直接角标修改数据
同时 Vue.js 提供了两个额外的&糖方法& $set 和 $remove 来弥补这方面限制带来的不便。整体上看这是个取舍有度的设计。我个人之前在设计数据绑定库的时候也采取了类似的设计 (一个半途而废的内部项目就不具体献丑了)，所以比较认同也有共鸣。
path 解析器的状态机设计
首先要说 parsers 文件夹里有各种&财宝&等着大家挖掘！认真看一看一定不会后悔的
parsers/path.js 主要的职责是可以把一个 JSON 数据里的某一个&路径&下的数据取出来，比如：
var path = 'a.b[1].v' var obj = {
} } parse(obj, path) // 2
所以对 path 字符串的解析成为了它的关键。Vue.js 是通过状态机管理来实现对路径的解析的：
咋一看很头大，不过如果再稍微梳理一下：
也许看得更清楚一点了，当然也能发现其中有一点小问题，就是源代码中 inIdent 这个状态是具有二义性的，它对应到了图中的三个地方，即 in ident 和两个 in (quoted) ident。
实际上，我在看代码的过程中，作者眼明手快，当天就进行了修复，现在最新的代码里已经不是这个样子了：
而且状态机标识由字符串换成了数字常量，解析更准确的同时执行效率也会更高。
一点自己的思考
首先是视图的解析过程，Vue.js 的策略是把 element 或 template string 先统一转换成 document fragment，然后再分解和解析其中的子组件和 directives。我觉得这里有一定的性能优化空间，毕竟 DOM 操作相比之余纯 JavaScript 运算还是会慢一些。
然后是基于移动端的思考，Vue.js 虽确实已经非常非常小巧了 (min+gzip 之后约 22 kb)，但它是否可以更小，继续抽象出常用的核心功能，同时更快速，也是个值得思考的问题。
第三我非常喜欢通过 Vue.js 进行模块化开发的模式，Vue 是否也可以借助类似 web components + virtual dom 的形态把这样的开发模式带到更多的领域，也是件很有意义的事情。
Vue.js 里的代码细节还不仅于此，比如：
cache.js 里的缓存机制设计和场景运用 (如在 parsers/path.js 中)
parsers/template.js 里的 cloneNode 方法重写和对 HTML 自动补全机制的兼容
在开发和生产环境分别用注释结点和不可见文本结点作为视图的&占位符&等等
自己也在阅读代码，了解 Vue.js 的同时学到了很多东西，同时我觉得代码实现只是 Vue.js 优秀的要素之一，整体的程序设计、API 设计、细节的取舍、项目的工程考量都非常棒！
总之，分享一些自己的收获和代码的细节，希望可以帮助大家开阔思路，提供灵感。
微信扫一扫vue.js 适合单页面应用吗?
需要开发 mobile web,暂时考虑 vue.js,但是查了一个感觉不太适合,没有路由功能,有高手推荐其他框架吗
按时间排序
现在有路由了哦：
vue是一个专注在ViewModel层的前端库。vue在移动端web或者webview中使用，最看重的是它压缩后的体积小的特点。就技术层面来说，还有语法简单、扩展性强、提供了组件化和双向绑定机制等特点。语法简单这点看下官网文档就知道了，写起来比较顺手。扩展性强，第一是因为只在ViewModel层解决问题，所以易于搭配其他的tool、lib、framework；第二是因为基于webpack和browserify的构建流程优异，让sass、less、babel、stylus、jade、typescript等常用技术都能配合使用。组件化和双向绑定都是这种ViewModel库的标配，用来解决SPA的数据流动、组件间通信问题，当然是非常适合的。路由功能，自己加一个第三方lib就是了，人家vue本来就不是负责这个问题的。另外vue提供了一个基于唯一uid缓存的diff算法，可以解决列表的渲染性能问题，非常的赞。具体vue+webpack的流程可以参考勾股的博文：。不过文中提到的just-vue脚手架，我们内部还在讨论优化。推荐考虑自己基于 官方DEMO修改配置。
以下这段是我从vuejs官网给你摘下来的：你可以手动监听 hashchange 并利用一个动态的 v-component 实现一些基本的路由逻辑。Example:1
&div id="app"&
&div v-component="{{currentView}}"&&/div&
ponent('home', { /* ... */ })
ponent('page1', { /* ... */ })
var app = new Vue({
el: '#app',
currentView: 'home'
// Switching pages in your route handler:
app.currentView = 'page1'
利用这种机制很容易接入独立的路由库，如
正在使用vue做一个供应商管理系统。因为vue仅是view层，我们选用了director.js作路由，自己实现了多语言，路由到页面，页面模块组织，model和验证都是自己实现。因此自己要实现的东西还是蛮多的。在不想自己搭建一个框架的前提下，用vue只适合简单的应用。
你需要集成的就用avalon或者angular其实前端路由功能特简单，crossroad.js,director.js
sammy.js都可以考虑2015ESRI开发者大会_vuejs_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
2015ESRI开发者大会_vuejs
21E​S​R​I​开​发​者​大​会​资​料
阅读已结束，如果下载本文需要使用
想免费下载本文？
你可能喜欢收藏，944 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
var kinds = [
{"id":"1"},
{"id":"2",},
{"id":"3",},
{"id":"4",}
var list = [
{"pid":"1",},
{"pid":"1",},
{"pid":"2",},
{"pid":"2",},
{"pid":"3",},
{"pid":"3",},
{"pid":"4",},
{"pid":"4",}
&script id="menuList" type="text/template"&
&%_.each(kinds, function(pitem) {%&
&div class="mOrder-menu-con-item"&
&h1&&%=pitem.id%&&/h1&
&%_.each(list, function(sitem) { if(sitem.pid == pitem.id) {%&
&%=sitem.id%&
如上，underscore可以在模板上写一些逻辑来做到根据kinds数组的id来过滤一部分list数组。
我尝试用Vuejs的过滤器实现上面这个过滤：
&ul id="demo"&
&li v-repeat="kinds:kinds"&
id:{{kinds.id}}
&div v-repeat="list:list | isInParent pid kinds.id"&
&span&{{ list.pid }}{{kinds.id}}&/span&
var kinds = [
{"id":"1",},
{"id":"2",},
{"id":"3",},
{"id":"4",}
var list = [
{"pid":"1",},
{"pid":"1",},
{"pid":"2",},
{"pid":"2",},
{"pid":"3",},
{"pid":"3",},
{"pid":"4",},
{"pid":"4",}
Vue.filter('isInParent', function (arr,value,pValue) {
var array = []
console.log(pValue)
arr.forEach(
function (obj,index) {
if (obj[value] == pValue){
array.push(arr[index])
var demo = new Vue({
el: '#demo',
kinds: kinds,
list: list
Vuejs的只能传递字符串给过滤器 --"list:list | isInParent pid kinds.id"，无法传递repeat中的kinds.id的值。
想请问使用Vuejs如何实现underscore这种过滤。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
3月5日 回答
谢邀。特地去学了underscore和vuejs（笑）。
大片代码可以用jsfiddle来表达，可以直接显示出来。
具体看下面的执行代码。
你要的是这个嘛？
PS：~~我觉得filter主要是给一个值做转化用的，而不是做过滤的，像是日期格式化啦，单词变大写啦。~~有没有考虑用lodash替换underscore？
在看完源码之后，我感觉到
这是一个坑，这绝对是一个坑(╯‵□′)╯︵┻━┻
你当我没说上面那句话。
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知