Vue 2.3、2.4 知识点小结

原文连接原文连接 blog ， 本文不涉及 SSR.

2.3 参考 https://github.com/vuejs/vue/releases/tag/v2.3.0
2.4 参考 https://github.com/vuejs/vue/releases/tag/v2.4.0
实例 demo 地址：https://github.com/jkchao/vue-demo

---

2.3

• style 多重值；

    
  "{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">div>

  这会渲染数组中最后一个被浏览器支持的值。

• 新增.passive 修饰符 (demo1) ； .passive 修饰符表示事件永远不会调用 preventDefault() ，主要为解决滚动和触摸事件的卡顿而出现，关于 passive 更多信息请移步 MDN 。

• 重新引入 .sync 修饰符 (demo2)；提供对于 prop 的双向绑定。

    "foo">child>

  其实是个语法糖

    "foo" @update:bar="e => foo = e">

  此时需要在子组件中显示触发事件：

    this.$emit('update:bar', newValue)

• Async Component Improvements (demo3);

  在 2.3 之前，可以使用异步组件：

  // some.vue
  export default {
    // ...
    components: {
      'asyncCom': () => import('./asyncCøm')
    }
  }

  2.3 新增高级异步组件

  官网上比较清楚：

  为了便于演示，使用延迟加载异步组件：

  
  import loadingCom from '../components/loadingCom.vue'
  import errCom from '../components/errCom.vue'
  const asyncCom = () => ({
    component: new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(import('../components/asyncCom.vue'))
      }, 2000)
    }),
    loading: loadingCom,
    error: errCom,
    delay: 200,
    timeout: 3000
  })
  
  export default {
    // ...
    components: { asyncCom }
  }
  

  效果如下图：

  或者，你也可以点击后加载 (demo4)：

  当然，也可以用于 vue-router ( 2.40+ ) demo5。

• Functional Component Improvements；

  在2.3 + 版本，函数式组件可以省略 props 选项，所有组件上的属性会被自动解析 成props，更多内容，请参考 https://cn.vuejs.org/v2/guide/render-function.html#函数化组件 。

2.4

• v-on 支持绑定一个事件／监听器键值对的对象，此时不支持任何修饰器；

  "{ mousedown: some, mouseup: other }">button>

• 新增 comments 选项，当设为 true 时，将会保留且渲染模板中的 HTML 注释；
  该选项暂时无法在构建工具中使用 issues。

• 新增 interitAttrs 选项；

  在版本 2.4 之前，默认情况下父作用域的不被作为props特性绑定的属性，将会作为普通的 HTML 属性，应用在跟元素上。

  举个例子：

  // parent.vue