w3ctech

Vue.js 2.2.0 正式发布

Vue@2.2.0的release版本分别接受了22位不同贡献者所发起的pull request

升级小贴示

在升级vue的同时，也不要忘记升级vue-template-compiler和vue-loader

Vue@2.2.0的大变化

虽说在这个release版本中，(从用户使用的角度来看)，框架所暴露出的(public) API(其实是)没有发生断崖式的改变。不过需要注意的是，如果你的项目代码使用了之前版本文档未说明的API，(那么只要框架内部有一点改动)，都会导致你项目代码的调整

  • 组件使用v-for属性，key必写。否则，在升级框架以后，(运行你的app应用)，就会发现：控制台会打出一堆的“soft warnings“警告，不过不写key也不会对你的app造成影响

  • 现在，模板解析器会在标签匹配不到闭合标签的情况下报错。虽然HTML5规范允许标签不闭合，但是在大多数情况下，标签不闭合会(在模板引擎解析的过程中)导致一些意想不到的❌，也会引入一些难以察觉的bug。上述(对标签是否闭合的)检查不适用于DOM中的模板，这是因为HTML字符串在传递给Vue模板解析器之前已经被浏览器标准化。(言外之意：浏览器会在标签没有闭合的情况下，给该标签添加结束标签)

  • props和computed属性将不再以Vue实例属性的方式存在，而是会挂载在组件的原型(prototype)上。这样就能(很好的)避免用户滥用Object.defineProperty来定义Vue实例的props和computed属性，从而改善组件在初始化过程中存在的性能问题。而且，只有在你遍历Vue实例属性的过程中使用hasOwnProperty检查props以及computed属性的条件下，上述做法(指的是props和computed属性挂载在组件的原型)才会影响你的代码，虽说上述做法(指的是遍历Vue实例属性且使用hasOwnProperty检查props以及computed属性)不常见，不过我们还是想通过代码来详细阐述这些变化。(相关的commit:406352b，e870e6c)

  • 如果你之前是通过try...catch来捕获组件生命周期钩子可能出现的❌，不过现在不适用啦，这是因为现在框架不再会直接抛出❌。所以，你可以使用全局Vue.config.errorHandler来拦截以及处理❌

  • 通过Vue.util暴露出的属性和方法很多都已经被移除啦。如果你之前使用上述代码，那么你应该做好代码迁移的准备工作。这是因为Vue.util对象现在只会在框架内部使用(言外之意：Vue.util已不属于框架所暴露出的(public) API范畴)，而且保不齐将来发生改变。

  • 我们使用Webpack2来构建Vue源码，现在默认导出的是使用ES6模块系统的代码(dist/vue.runtime.esm.js)。这就意味着，不但不需要对Webpack2进行任何别名(alias)配置，而且Webpack2会把require('vue')代码包装成对象({ __esModule: true, default: Vue })。所以在使用Webpack2构建项目时，你应该只使用import Vue from 'vue'来引入vue

当然你也可以去看看README.md来获取更多的细节。

对于使用webpack2来构建TypeScript项目的用户来说：在使用ES6模块系统来默认导出代码的大背景下，使用import Vue = require('vue')代码将会不起作用。如果遇到上述情况，可以去看看在Vue中如何使用TypeScript来获取更多的细节。

新功能

服务端渲染改善的地方

  • 新增渲染选项：template。允许你使用template选项来向渲染引擎传递整个HTML页面模板，文档

  • bundleRenderer现在可以接收vue-ssr-webpack-plugin生成的bundle对象。使用新的bundle可以无缝对接webpack的代码分割机制、无缝支持source map功能，文档

  • 对vue-router、vue-style-loader也进行了相应的修改。在使用vue-router的时候，同时使用vue-style-loader，这样会让SSR和代码分割机制更容易实现，敬请期待(stay tuned for)相关的书面记录

错误处理改善的地方

  • 在组件生命周期钩子出现的❌、监控getter时出现的❌以及回调函数里面出现的❌都将不会再让整个app出现闪退。如果框架提供errorHandler的话，这些错误将会被Vue.config.errorHandler来拦截、处理

  • 用户实例化Vue对象，新增错误选项：renderError。当默认的render函数抛出❌时，renderError函数将会被调用，另外该函数会接收render函数抛出的错误作为第二个参数

    new Vue({
      render (h) {
        throw new Error('oops')
      },
      renderError (h, err) {
        return h('pre', { style: { color: 'red' }}, err.stack)
      }
    }).$mount('#app')

定制组件的v-model

  • 在这之前，给常见组件添加v-model属性默认会把value作为组件的属性，然后把input值作为给组件绑定事件时的事件名。不过会给用户在创建类似复选框或者单选框的常见组件的过程中添加一些限制。在2.2版本，你可以在定义组件时通过model选项的方式来定制prop/event
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上面的代码等价于：

<my-checkbox
  :checked="foo"
  @change="(val) => { foo = val }"
  value="some value">
</my-checkbox>

Provide & Inject

  • 新增的provide以及inject选项可以为用户提供类似React context特性的功能：
const Provider = {
  provide () {
    return {
      foo: 'bar'
    }
  }
}

const Consumer = {
  inject: ['foo']
}

现在，只要Consumer对象是在Provider子树的里面被实例化，那么provide将会给Consumer对象注入属性值为bar的foo属性(this.foo === 'bar')。这个特性将会为插件、组件库作者提供高级用法，不过这做法需要慎重。

查看更多的细节

其它

  • 在应用启动时，可以通过设置Vue.config.productionTip = false来关闭生产模式下给出的提示

  • 组件当前的属性会被暴露在this.$props对象上

  • <transition>和<transition-group>都可以通过新增的duration属性实现更精确的过渡持续时间

<!-- same duration for enter/leave -->
<transition :duration="500">

<!-- different duration for enter/leave -->
<transition :duration="{ enter: 300, leave: 500 }">

  • 新增config：Vue.config.performance。值设置为true，就可以追踪组件一些操作(初始化、编译、渲染)，并且可以修正(浏览器)开发者工具的timeline选项卡所显示的时间，不过该配置只有在dev模式下有效

  • <keep-alive>：activated和deactivated会激活组件内部的activated/deactivated树

  • vm.$on()支持对多个事件注册相同的回调函数，vm.$on([eventA, eventB], callback)

  • v-on新增对鼠标事件的修饰：.left、.right、.middle。?：<button @click.right="onRightClick">

  • vue-template-compiler：parseComponent的结果现在加入了block的属性

  • Vue.delete现在也支持数组参数：Vue.delete(arr, index)

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复