【整理】Vue 2.0 自 beta 1 自 beta 4 以来的主要更新

主要内容来自 https://github.com/vuejs/vue/releases

之前 Vue 2.0 发布技术预览版 到现在差不多三个月了,之前写过一篇简单的 code review如今三个月过去了,Vue 2.0 在这个基础之上又带来了不少更新,这里汇总 beta 以来 (最新的版本是 beta 4) 的主要更新,大家随意学习感受一下

alpha 和 beta 版本的侧重点会有所不同

首先 Vue 2.0 对 alpha、beta 有自己的理解和设定:alpha 版本旨在完善 API、考虑所需的特性;而来到 beta 版则会对未来的正式发布进行充分的“消化”,比如提前进行一些必要的 breaking change,增强框架的稳定性、完善文档和周边工具 (如 vue-router 2.0 等)

最后的几个 alpha 版本主要更新

Vue 本身的语法基础这里就不多赘述了,网上有很多资料可以查阅,我们已经假定你比较熟悉 Vue 并对 2.0 的理念和技术预览版的状态有一定的了解。

alpha 5

  1. ref 的写法由 <comp v-ref:foo> 变成了 <comp ref="foo">,更加简单,同时动态数据的写法是 <comp :ref="x">
  2. 支持 functional components,这个特性蛮酷的,可以把一个组件的生成过程完全变成一个高度自定义的函数执行过程,比如:
Vue.component('name', {
    functional: true,
    props: ['x'],
    render: (h, props, children) {
        return h(props.tag, null, children)
    }
})

你可以在 render() 函数里写各种特殊的逻辑,这样标签的含义和能力都得到了非常大的扩展,在后续的几次更新中,你马上会感受到一些 functional components 的威力

另外剧透一下,h 方法里的第二个参数如果是 null 就可以省略,这个改动出现在了 beta 1

alpha 6

可以设置特殊的 keyCode,比如 Vue.config.keyCodes.a = 65,然后你就可以写 <input @keyup.a="aPressed">

alpha7

  1. 一个组件的生命周期名由 init 改成了 beforeCreated (大家可以在 Vuex 和 weex-vue-framework 的源码里看到对应的改变哦)
  2. Vue.transition 的 hook 支持第二个参数,把 vm 传递进去,如:
Vue.transition('name', {
    onEnter (el, vm) {
        ...
    }
})

Beta 1 ~ Beta 4

beta 1

  1. 自定义 directive 里 update 的触发时机发生了变化,由于 functional component 等概念的引入,一个 directive 的变更的颗粒度也不完全是 directive 本身引起的,所以这里做了一个更具有通用性的调整;同时 hook 名 postupdate 也相应的更名为 componentUpdated——如果你想让 update 保持原有的触发时机,可以加入一句 binding.value !== binding.oldValue 即可。
  2. Vue.traisition 的 hook 名做了简化
    • onEnter -> enter
    • onLeave -> leave
  3. server-side rendering
    • server.getCacheKey 更名为 serverCacheKey,避免多一层结构嵌套
    • createRenderer/createBundleRenderer 方法不会强制应用 lru-cache,而是开发者手动选择

beta 2

<transition> 标签来了!

其实这个玩意儿我之前在 polymer 等其他框架里也见到过,不过看到 Vue 的语法设计,还是觉得巧妙而简洁:

<transition>
    <div v-if="...">...</div>
</traisition>

<transition-group tag="ul">
    <li v-for="...">...</li>
</traisition-group>

更牛掰的在这里,还记得 functional components 吧,你今天可以这样抽象一个动画效果的标签:

Vue.component('fade', {
    functional: true,
    render (h, children) {
        return h('transition', {
            props: {...},
            on: {
                beforeEnter,
                afterEnter
            }
        }, children)
    }
})

然后

<fade>...</fade>

就可以实现高度自定义的动画效果了,这个我个人觉得是非常赞的设计和实现!

beta 3

  1. 支持在自定义组件中使用原生事件。因为在 Vue 2.0 的设计中,自定义组件上是不能绑定原生事件的,自定义组件上的时间绑定被默认理解为组件的自定义事件,而不是原生事件。针对这个问题我很早就提了 issue 当时小右提出了一个新的语法设计,就是 <comp @click.native="..."></comp>,beta 3 的时候终于看到它被实现了,嘿嘿,有点小激动
  2. 支持两种语法 <div :xxx.prop="x"><div v-bind:prop="{ xxx: x }"> 来对 DOM 的 property 进行绑定,这个实现也给了 Weex 一些启发,因为现在 Weex 的 virtual-DOM 里是没有 property 的,只有 attribute,但是在组件设计当中,只有 attr 没有 prop 还是显得捉襟见肘。现在我们的 native 组件大多是通过 native module APIs 来变相达到类似的目的的,Vue 的这个新的设计稍微给 Weex 也开了个小小的脑洞,也许顺着这个思路能做出些更方便好用的东西出来

beta 4

2 天前发布的,其实这个版本以 bugfix 为主

总结

以上是近期 Vue 2.0 的一些更新,让我自己比较兴奋的主要是 functional component 以及基于这个设计的 <transition><transition-group> 标签和自定义 transition 标签的能力拓展,还有就是久违的 <comp @click.native="..."></comp>

最后希望大家可以多多试用,有更大兴趣的可以多多学习 Vue 的源码,有更大兴趣的可以参与一下 Weex!(硬广完毕)

时间: 2025-01-01 11:08:19

【整理】Vue 2.0 自 beta 1 自 beta 4 以来的主要更新的相关文章

[译]Vue 2.0的变化(一)之基本API变化

高层级的变化 模板解析器不再依赖于DOM(除非你使用真正的DOM作为模板),因此只要你使用字符串模板,你将不再受到任何1.0版本中的解析限制.但是,如果你依赖在存在的内容中挂载一个元素作为模板(使用el元素),你将依然受到这些限制. 编译器(将字符串模板转换为渲染方法的部分)和运行时间现在能够被分开.这里有两种不同的构建: 独立构建:包括编译并且运行.这种方式和vue 1.0几乎完全一样. 运行时编译:由于它不包括编译器,在编译步骤时要么预编译模板,要么手动编写渲染功能.npm包默认导出这个版本

Code Review for Vue 2.0 Preview

是的!Vue 2.0 发布了! Vue 2.0 preview 仓库在此 首先,当我第一次看到 Vue 2.0 的真面目的时候,我的内心是非常激动的 Demo 来个简单的 demo,首先把 dist/vue.js 导入到一个空白的网页里,然后写: 当然,在大家阅读下面所有的内容之前,先想象一下,这是一个运行时 min+gzip 后只有 12kb 大小的库 <script src="./dist/vue.js"></script> <div id="

WinRAR 5.0的第七个Beta版发布了

WinRAR是一款强大的压缩文件管理器,它提供了RAR和ZIP文件的完整支持,能解压ARJ.CAB.LZH.ACE.TAR.GZ.UUE.BZ2.JAR.ISO格式文件. 日前,WinRAR 5.0的第七个Beta版发布了,它主要修复了之前版本中存在的一些小Bug,例如:WinRAR无法创建必要的目录结构用以存储硬链接,所以如果文件包含一个尚不存在的硬链接,那么解压时就会出错:在处理文件时rn命令显示错误的文件名称:解压ACE文档时,WinRAR会创建空的文件夹. WinRAR 5.0 Beta

Element 1.3.6 发布,饿了么 Vue 2.0 组件库

Element 1.3.6 已发布,更新内容: 修复 ColorPicker 的默认值有时与面板中的值不一致的问题 修复默认值为白色的 ColorPicker 无法通过面板改变 hue 的问题 修复 Dialog 在滚动后,其嵌套的 Select 需多次点击才能呼出的问题 新增 Autocomplete 的 props 属性 修复 DatePicker 在手动输入值后按 Tab 切换焦点时下拉框不消失的问题 Element 是由饿了么公司前端团队开源,是一套为开发者.设计师和产品经理准备的基于

Element 1.3.4 发布,饿了么 Vue 2.0 组件库

Element 1.3.4 已发布,Element 是由饿了么公司前端团队开源,是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 更新内容: 修复带展开行的 Table 在高亮和斑马纹效果下的问题 新增 Select 的 default-first-option 属性 修复可创建选项的 Select 在没有选项数据时不显示「无数据」文本的问题 文章转载自 开源中国社区[https://www.oschina.net]

Element 1.3.5 发布,饿了么 Vue 2.0 组件库

Element 1.3.5 已发布,更新内容: 修复 Select 的 default-first-option 属性在远程搜索时不生效的问题 修复 InputNumber 与其他表单组件同行显示时不能对齐的问题 修复行内 FormItem 对复合型 Input 失效的问题 修复 FormItem 在 Firefox 中的高度与其他浏览器不一致的问题 修复 Cascader 中 value 为 0 的数据不能展开下一级的问题 修复 Autocomplete 无法触发原生 keydown 和 ke

《LDA漫游指南》——2.3 Beta分布(Beta distribution)

2.3 Beta分布(Beta distribution) 在概率论中,Beta分布是指一组定义在区间(0,1)的连续概率分布,有两个参数alpha 和beta ,且alpha ,beta > 0. Beta分布的概率密度函数是 (2.5) 随机变量X服从参数为的Beta分布通常写作:Xsim Beta(alpha ,beta ). 这个式子中分母的函数B(alpha ,beta )称为beta函数. 两种证明方法这里我们来证明一个重要的公式,该公式中的关系在LDA算法Gibbs Samplin

Beta 1 到 Beta 2 改变详细列表(英文)Beta 1 to Beta 2 Changes

Beta 1 to Beta 2 ChangesHere's the first thing I would do if you are a developer of .NET 1. BOOKMARK THIS PAGE! It will save you a ton of time as you migrate your apps. Then as you find a broken namespace in your app, or something else that no longer

在ASP.NET 2.0中操作数据之十六:概述插入、更新和删除数据_自学过程

导言 结束前面的几节,我们已经探讨过了如何使用GridView.DetailsView和FormView控件来显示数据.这些控件简单地操作提供给它的数据.一般地,这些控件通过使用一个数据源控件,例如ObjectDataSource来存取数据.我们已经看过了ObjectDataSource是如何在ASP.NET页面和潜在的数据之间扮演一个代理的角色.当一个GridView需要显示数据时,它调用ObjectDataSource的Select()方法,这个方法转而调用一个来自我们的业务逻辑层(BLL)