专栏首页逸繁Vue.js 的一些小技巧

Vue.js 的一些小技巧

给 props 属性设置多个类型

这个技巧在开发组件的时候用的较多,为了更大的容错性考虑,同时代码也更加人性化:

export default {
  props: {
    width: {
      type: [String, Number],
      default: '100px'
    }
    // 或者这样
    // width: [String, Number]
  }
}

比如一个 <my-button> 上暴露了一个 width 属性,我们既可以传 100px,也可以传 100

<!-- my-button.vue -->
<template>
  <button :style="computedWidth">{{ computedWidth }}</button>
</template>

<script>
  export default {
    props: {
      width: [String, Number]
    },
    computed: {
      computedWidth () {
        let o = {}
        if (typeof this.width === 'string') o.width = this.width
        if (typeof this.width === 'number') o.width = this.width + 'px'
        return o
      }
    }
  }
</script>

使用:

<!-- 在其他组件中使用 -->
<template>
  <my-button :width="100px"></my-button>
  <!-- or -->
  <my-button :width="100"></my-button>
</template>

data 初始化

因为 props 要比 data 先完成初始化,所以我们可以利用这一点给 data 初始化一些数据进去,看代码:

export default {
  data () {
    return {
      buttonSize: this.size
    }
  },
 props: {
   size: String
 }
}

除了以上,子组件的 data 函数也可以有参数,且该参数是当前实例对象。所有我们可以利用这一点做一些自己的判断。如,改写上面的代码:

export default {
  data (vm) {
    return {
      buttonSize: vm.size
    }
  },
 props: {
   size: String
 }
}

template

我们在做 v-if 判断的时候,可以把判断条件放在 template 组件上,最终的渲染结果将不包含 <template> 元素。

<template>
  <div class="box">
    <template v-if="isVal">
      <h2>...</h2>
    </template>
    <template v-else>
      <h2>...</h2>
    </template>
  </div>
</template>

v-for 也同样适用。

Lifecycle hook

生命周期钩子可以是一个数组类型,且数组中的函数会依次执行。

export default {
 ...
 created: [
   function one () {
     console.log(1)
   },
   function two () {
     console.log(2)
   }
 ]
 ...
}

没什么用,知道就行了。事实上生命周期钩子还可以作用于 DOM 元素上,利用这一点,我们可以用父组件中的方法来初始化子组件的生命周期钩子:

<!-- Child.vue -->
<template>
  <h3>I'm child!</h3>
</template>

<!-- Parent.vue -->
<template>
 <child @hook:created="handleChildCreated"></child>
</template>

<script>
   import Child from './child.vue'
   export default {
     components: [ Child ],
     methods: {
       handleChildCreated () {
         console.log('handle child created...')
       }
     }
   }
</script>

其他钩子雷同,不再赘述。

v-for 和 v-if 一起使用

由于 v-forv-if 渲染优先级更高,所以有时候可以一起使用。下面两种常见的情况下会倾向于把 v-forv-if 放在同一个标签上使用:

  • 筛选一些不想显示的条目
  • 为了避免渲染本应该被隐藏的列表

举个栗子:

<template>
  <ul class="items">
    <!-- 只有激活的用户才可以显示 -->
    <li 
      v-for="(user, index) in users" 
      v-if="user.isActive" 
      :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

关于以上两点不明白的地方可以参见 Vue 风格指南

混合

如果好多组件都共用到一些像 propsdatamethods 等,可以单独抽出来放到 mixins 混合器中。比如,在用户管理列表中使用。

分页混合器:

// paging-mixin.vue
export default {
  props: {
    pageSize: 1,
    pageLength: 10,
    currentPage: 1
    total: 20
  },
  methods: {
    /**
     * 上一页
     */
    prevPage (page) {
      ...
    },
    /**
     * 下一页
     */
    nextPage (page) {
      ...
    }
    /**
     * 跳转到当前页
     */
    currentPage (page) {
      ...
    }
  }
}

Users.vue:

<template>
  <div class="user-model">
    <my-table :data="users"></my-table>
    <my-paging
      :page-length="pageLength"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
    </my-paging>
  </div>
</template>

<script>
  import PagingMixin from '../mixins/paging-mixin.vue'
  export default {
    mixins: [PagingMixin],
    data () {
      return {
        users: [],
        pageLength: 10,
        pageSize: 1,
        currentPage: 1,
        total: 20
      }
    }
  }
</script>

不用每个页面都写一遍 propsmethods 了。

render 函数

下面是一段简单的 template 模板代码:

<template>
  <div class="box">
    <h2>title</h2>
    this is content
  </div>
</template>

我们用渲染函数来重写上面的代码:

export default {
  render (h) {
    let _c = h
    return _c('div', 
      { class: 'box'}, 
      [_c('h2', {}, 'title'), 'this is content'])
  }
}

事实上,Vue 会把模板(template)编译成渲染函数(render),你可以通过一个在线工具 实时查看编译结果。上面的 template 模板会被编译成如下渲染函数:

let render = function () {
  return _c('div',
    {staticClass:"box"},
    [_c('h2', [_v("title")]), _v("this is content")])
}

是不是很像? 正如官方说的,渲染函数比 template 更接近编译器。如果用一个流程图来解释的话,大概是这个样子:

template
    ↓
预编译工具(vue-loader + vue-template-compile)
    ↓
  render
    ↓
resolve vnode

具体参见 Vue声明周期图示

渲染函数用处:

  • 开发组件库,Element 源码用的都是 render
  • 封装一些高阶组件。组件里面嵌套组件就是高阶组件,前提是要满足组件三要素:propseventslot
  • 用于处理一些复杂的逻辑判断。如果我们一个组件里面有很多 v-if 判断的话,用模板就显得不合适了,这个时候可以用渲染函数来轻松处理

errorCaptured

捕获一个来自子孙组件的错误时被调用。有时候当我们想收集错误日志,却不想把错误暴露到浏览器控制台的时候,这很有用。下面是个例子:

Child.vue

<template>
  <!-- 省略一些无关代码 -->
</template>
<script>
  export default {
    mounted () {
      // 故意把 console 写错
      consol.log('这里会报错!')
    }
  }
</script>
复制代码

Parent.vue

<template>
  <child></child>
</template>
<script>
  import Child from './Child.vue'
  export default {
    components: [ Child ],
    /**
     * 收到三个参数:
     * 错误对象、发生错误的组件实例
     * 以及一个包含错误来源信息的字符串。
     * 此钩子可以返回 false 以阻止该错误继续向上传播。
     */
    errorCaptured (err, vm, info) {
      console.log(err)
      // -> ReferenceError: consle is not defined ...
      console.log(vm)
      // -> {_uid: 1, _isVue: true, $options: {…}, _renderProxy: o, _self: o,…}
      console.log(info)
      // -> `mounted hook`
      // 告诉我们这个错误是在 vm 组件中的 mounted 钩子中发生的
      
      // 阻止该错误继续向上传播
      return false
    }
  }
</script>

关于 errorCaptured 更多说明,请移步官网->

v-once

通过 v-once 创建低开销的静态组件。渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来,就像这样:

<template>
  <div class="box" v-once>
    <h2> 用户协议 </h2>
    ... a lot of static content ...
  </div>
</template>

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。关于 v-once 更多介绍,请移步官网->

slot-scope

作用域插槽。vue@2.5.0 版本以前叫 scope,之后的版本用 slot-scope 将其代替。除了 scope 只可以用于 <template> 元素,其它和 slot-scope 都相同。

用过 Element 组件的同学都知道,当我们在使用 <el-table> 的时候会看到如下代码:

Element@1.4.x 的版本:

<el-table-column label="操作">
  <template scope="scope">
  <el-button
    size="small"
    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  <el-button
    size="small"
    type="danger"
    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

但在 2.0 之后的版本替换成了 slot-scope

Element@2.0.11:

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

说白了,slot-scope 相当于函数的回调,我把结果给你,你想怎么处理就怎么处理,一切随你:

function getUserById (url, data, callback) {
  $.ajax({
    url,
    data,
    success: function (result) {
      callback(result)
    }
  })
}

// 使用
getUserById('/users', { id: 1 }, function (response) {
  // 拿到数据并开始处理自己的页面逻辑
})

下面我们来简单模拟下 <el-table> 组件内部是怎么使用 slot-scope 的,看代码:

模拟的 <el-table> 组件:

// 定义模板
let template = `
 <ul class="table">
  <li v-for="(item, index) in data" :key="index">
    <!-- 我希望数据由调用者自己处理 -->
    <!-- 'row' 相当于变量名,随便定义,比如 aaa,bbb 啥的 -->
    <slot :row="item">
      <!-- 当使用者什么都没写的时候,默认值才会显示-->
      {{ item.name }}
    </slot>
  </li>
 </ul>
`
Vue.component('el-table', {
  template,
  props: {
    data: Array,
    default: []
  }
})

在你需要的地方使用 <el-table> 组件:

HTML:

<div id="app">
  <el-table :data="userData">
    <!-- 使用的时候可以用 template -->
    <!-- `scope` 也是个变量名,随便命名不是固定的,比如 foo, bar -->
    <template slot-scope="scope">
      <!-- 其中 `scope.row` 中的 row 就是我们上边定义的变量啦-->
      <!-- `scope.row`返回的是 `item` 对象 -->
      <template v-if="scope.row.isActived">
        <span class="red">{{ scope.row.name }}</span>
      </template>
      <template v-else>
        {{ scope.row.name }}
      </template>
    </template>
  </el-table>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    userData: [
      {id: 1, name: '张三', isActived: false},
      {id: 2, name: '李四', isActived: false},
      {id: 1, name: '王五', isActived: true},
      {id: 1, name: '赵六', isActived: false},
    ]
  }
})

CSS:

.red {
  color: red
}

你可以狠狠的戳这里查看上面的效果!最后,我们再使用 render 函数来重构上面的代码:

JavaScript:

// `<el-table>` 组件
Vue.component('el-table', {
  name: 'ElTable',
  render: function (h) {
    return h('div', { 
      class: 'el-table'
    }, this.$slots.default)
  },
  props: {
    data: Array
  }
})

// `<el-table-column>`
Vue.component('el-table-column', {
  name: 'ElTableColumn',
  render: function (h) {
    // 定义一个存放 li 元素的数组
    let lis = [], 
       // 获取父组件中的 data 数组
       data = this.$parent.data
    // 遍历数组,也就是上面的 `v-for`,生成 `<li>` 标签
    // `this.$scopedSlots.default` 获取的就是上面 slot-scope 作用于插槽的部分,
    // 并把 `{ row: item }` 传给上面的 `scope` 变量
    data.forEach((item, index) => {
      let liEl = h('li', {
        key: item.id
      }, [ this.$scopedSlots.default({ row: item }) ])
      // 把生成的 li 标签存到数组
      lis.push(liEl)
    })
    return h('ul', {
      class: 'el-table-column'
    }, lis)
  }
})

在你的页面这样来使用:

HTMl:

<div id="app">
  <el-table :data="list">
    <el-table-column>
      <template slot-scope="scope">
        <span class="red" v-if="scope.row.actived">{{ scope.row.name }}</span>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    list: [
      { id: 1, name: '张三', actived: false },
      { id: 1, name: '李四', actived: false },
      { id: 1, name: '王五', actived: true },
      { id: 1, name: '赵六', actived: false },
    ]
  }
})

疑问:我们完全可以在 <li> 中进行逻辑判断,为什么还要放到外面进行处理呢? 因为有时候我们用的不是自己开发的组件,比如上面的 <el-table> ,所以就有必要这么做了。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MySQL常见问题

    mysql数据库做分页用limit关键字,它后面跟两个参数startIndex和pageSize

    步履不停凡
  • 什么是ORM?

    一、ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不...

    步履不停凡
  • ubuntu16.4+nginx+uwsgi+Django 部署上线

    Nginx是一款轻量级的HTTP服务器,采用事件驱动和异步非阻塞处理方式框架,这让其具有极好的IO性能,市场用于服务端的反向代理和负载均衡

    步履不停凡
  • 用 node.js 模仿 Apache 的部分功能

    用户4831957
  • css基础:把所有背景图都集成在一张图片上,减少图片服务器请求次数

    好象现在越来越流行这种玩法了,原来大家都是把背景切成单个小图片,要用背景的时候一个个定义,这样页面打开的时候,也会加载各个小图片,但是这种办法把所有小图片都集中...

    菩提树下的杨过
  • react中key的正确使用方式

    在开发react程序时我们经常会遇到这样的警告,然后就会想到:哦!循环子组件忘记加key了~

    ConardLi
  • 电商类小程序实战教程 Vol.2:列表加载

    知晓君
  • 简单脚本实现服务器保持自动更新

    huginn 中文网
  • 项目管理快速入门03--其他知识领域

    之前介绍项目管理10大过程中,综合的整合管理,和"多快好省"4大核心过程,接下来介绍其他5类辅助管理,其中风险管理是重难点。 ? 规划人力资源管理:识别和记...

    用户1216676
  • 蚂蚁金服面试Java经历——内含大量干货!一、 电面:二、 现场面:三、 HR面:

    美的让人心动

扫码关注云+社区

领取腾讯云代金券