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

简介: 主要内容来自 https://github.com/vuejs/vue/releases 之前 [Vue 2.0 发布技术预览版](http://jiongks.name/blog/announcing-vue-2/) 到现在差不多三个月了,之前写过一篇简单的 [code review](ht

主要内容来自 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!(硬广完毕)

目录
相关文章
|
4月前
|
JavaScript 前端开发 开发者
Vue Styled Components 新版本发布
Vue Styled Components 新版本发布
|
4月前
基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用
本文介绍了如何在Vue2.X和Vue3.X项目中引入并使用`vue-code-diff`和`v-code-diff`代码差异插件来展示和比较代码变化。
235 0
基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
JavaScript 前端开发 大数据
Vue 灰度发布新功能的那些事
Vue 灰度发布新功能的那些事
228 3
|
存储 API
R -安装组件_1.9.1-beta
R -安装组件_1.9.1-beta
665 0
|
前端开发 API 调度
React18 Alpha提前看
本文适合对React18感兴趣的小伙伴进行阅读
React18 Alpha提前看
|
JavaScript 算法 索引
vue3 源码学习,实现一个 mini-vue(十二):diff 算法核心实现
我们之前完成过一个 `patchChildren` 的方法,该方法的主要作用是为了 **更新子节点**,即:**为子节点打补丁**。 子节点的类型多种多样,如果两个 `ELEMENT` 的子节点都是 `TEXT_CHILDREN` 的话,那么直接通过 `setText` 附新值即可。
vue3 源码学习,实现一个 mini-vue(十二):diff 算法核心实现
|
监控 jenkins 测试技术
搭建Vue3组件库:第九章 持续集成CI:基于GitHub的Action回归验证
本章介绍一下github的工作流的持续集成服务。
304 0
搭建Vue3组件库:第九章 持续集成CI:基于GitHub的Action回归验证
|
JavaScript 前端开发 算法
重学Vue【组件更新和diff算法】
重学Vue源码,根据黄轶大佬的vue技术揭秘,逐个过一遍,巩固一下vue源码知识点,毕竟嚼碎了才是自己的,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。
210 0
|
JavaScript
不同vue版本下如何分环境打包
不同vue版本下如何分环境打包