Vue 2.三、2.4 知识点小结

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

2.3 参考 https://github.com/vuejs/vue/...
2.4 参考 https://github.com/vuejs/vue/...
实例 demo 地址：https://github.com/jkchao/vue...

---

2.3

• style 多重值；

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

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

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

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

  <child :bar.sync="foo"></child>

  实际上是个语法糖

  <child :bar="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...函数化组件 。

2.4

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

<button v-on="{ mousedown: some, mouseup: other }"></button>

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

• 新增 interitAttrs 选项；

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

  举个例子：

  // parent.vue
  <template>
    <child-commpent :foo="f" :boo="b"></child-comment>
  </template>
  
  <script>
  const childComment = () => import('./childCom.vue')
  export default {
    data () {
      return {
        f: 'Hello world!'
        b: 'Hello Vue!'
      }  
    }
  }
  </script>

  // childComment.vue
  <template>
    <div>{{ foo }}<div>
  </template>
  
  <script>
  export default {
    props: ['foo']
  }
  </script>

  最后会被渲染为：

  <div boo="Hello Vue!">Hello world!</div>

  设置 interitAttrs 为 false，以后，不会应用到跟元素上。

  // childCom.vue
  <template>
    <div>{{ foo }}</div>
  </template>
  
  <script>
  export default {
    props: ['foo'],
    inheritAttrs: false
  }
  </script>

  渲染：

  <div>Hello world!</div>

• 新增 $attrs, $listeners 选项；

  多级组件嵌套须要传递数据时，一般使用的方法是经过 vuex 。若是仅仅是传递数据，而不作中间处理，使用 vuex 处理，未免有点杀鸡用牛刀，Vue 2.4 版本提供了另外一种方法，使用 v-bind="$attrs" , 将父组件中不被认为 props特性绑定的属性传入子组件中，一般配合 interitAttrs 选项一块儿使用，具体请看 demo 。

  // demo.vue
  <template>
    <div>
      <child-com :foo="foo" :boo="boo" :coo="coo" :doo="doo"></child-com>
    </div>
  </tempalte>
  <script>
  const childCom = () => import('./childCom1.vue')
  export default {
    data () {
      return {
        foo: 'Hello World!',
        boo: 'Hello Javascript!',
        coo: 'Hello Vue',
        doo: 'Last'
      }
    },
    components: { childCom }
  }
  </script>

  // childCom1.vue
  <template>
    <div>
      <p>foo: {{ foo }}</p>
      <p>attrs: {{ $attrs }}</p>
      <child-com2 v-bind="$attrs"></child-com2>
    </div>
  </template>
  <script>
  const childCom2 = () => import('./childCom2.vue')
  export default {
    props: ['foo'],
    inheritAttrs: false,
    created () {
      console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
    }
  }
  </script>

  // childCom2.vue
  <template>
    <div>
     <p>boo: {{ boo }}</p>
     <p>attrs: {{ $attrs }}</p>
     <child-com3 v-bind="$attrs"></child-com3>
    </div>
  </template>
  
  <script>
  const childCom3 = () => import('./childCom3.vue')
  export default {
    props: ['boo']
    inheritAttrs: false,
    created () {
      console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }
    }
  }
  </script>

  // childCom3.vue
  // ...

  最后被渲染为

  具体请看 demo6 。

  $listeners 的用法和 $attrs 相似，demo6 。

---

完。