Vue2.3、2.4知识点小结


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

2.3 参考 github.com/vuejs/vue/r… 2.4 参考 github.com/vuejs/vue/r… 实例 demo 地址: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 }
  }

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

效果如下图:

或者,你也可以点击后加载 (demo4):

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

  • Functional Component Improvements; 在2.3 + 版本,函数式组件可以省略 props 选项,所有组件上的属性会被自动解析 成props,更多内容,请参考 cn.vuejs.org/v2/guide/re…

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>

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  // childComment.vue
  <template>
    <div>{{ foo }}<div>
  </template>

  <script>
  export default {
    props: ['foo']
  }
  </script>

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最后会被渲染为:

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

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

 // childCom.vue
  <template>
    <div>{{ foo }}</div>
  </template>

  <script>
  export default {
    props: ['foo'],
    inheritAttrs: false
  }
  </script>

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

渲染:

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

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  // 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>

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 // 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>

作者:三毛丶
链接:https://juejin.im/post/596c7af1f265da6c251906c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最后被渲染为

具体请看 demo6$listeners 的用法和 $attrs 类似,demo6


完。

优质内容筛选与推荐>>
1、lwip之四:pbuf
2、SpringCloud----基础
3、这么多个月,我头一次体验用类的概念来写驱动
4、解决使用IIS5.0配置的FTP服务器,客户端浏览器访问时无法获取目录列表的问题。
5、Objective-C的可变是如何实现的?


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号