This website requires JavaScript.

Vue 2.3、2.4 知识点小结

2017.10.06 10:18字数 5830阅读 1189喜欢 24评论 5

本文不涉及 SSR.

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


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/render-fun...

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>
    

    设置 interitAttrsfalse,之后,不会应用到跟元素上。

      // 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


完。