四个Vue的写法优化技巧

watch的优化写法

我们平时总会遇到组件创建时获取列表,筛选项改变后刷新列表的需求,在watch中的逻辑,还要在组件的created()中再执行一遍,以下写法解决此痛点。

bad

export default {
  created() {
    this.fetchListData()
  },
  watch: {
    searchValue() {
      this.fetchListData()
    }
  }
}

good

export default {
  watch: {
    searchValue: {
      handler: 'fetchListData',
      immediate: true  //表示组件初始化时执行一次
    }
  }
}

优化组件引入的代码

在开发大型应用时,很多页面用到很多公共UI库的组件,按照Vue原本的写法,每种组件都要在每个页面引用一次,真是好累,如何省事偷懒呢?

bad

import BaseButton from '../components/baseButton'
import BaseInput from '../components/baseInput'
import BaseCard from '../components/baseCard'

export default {
  components: {
    BaseButton,
    BaseInpur,
    BaseCard
  }
}

good

在公共组件components文件夹下新建一个allImport.js文件,本质是使用webpack的一个require.context()方法来实现代码层级的动态引入,下面注意代码的实现,重点看注释。

// allImport.js
import Vue from 'vue'

function capitalizeFirstLetter(string) {
  // 此函数用途是首字符大写,baseInput->BaseInput 如果是已经首字符大写的文件名,不需要
  return string.charAt(0).toUpperCase() + string.slice(1)
}

function handleFileName(string) {
  // 把形如 ./fileName.vue -> fileName
  return string.replace(/^\.\//, '').replace(/\.\w+&/, '')
}

const requireComponent = require.context('.', false, /\.vue$/)
// 表示找到此文件夹下所有.vue为后缀的文件,详见webpack require.context文档

requireComponent.keys().forEach(fileName => { // fileName可以认为是路径字符串
  const componentConfig = requireComponent(fileName)
  const componentName = capitalizeFirstLetter(handleFileName(fileName))
  Vue.component(componentName, componentConfig.default || componentConfig)
})

main.js中引入这个脚本即可 import 'components/global.js' PS: 如果是用extend这个方法来继承Vue实例实现节省代码,每个页面的import还是不能省略

父子组件通信的优化写法

我们Vue组件写多了就会感觉到,父组件上面要写上监听子组件emit来的事件,同时每一个属性都得绑定了传过去,无论自定义的还是click/placeholder之类原生的。这个优化方法是把一些原生得属性和事件进行简写,尤其对组件库之类改造原有HTML元素有奇效。

bad

<!-- 父组件的模板写法 -->
<template>
  <div>
  <!-- 可以看到这个自定义的组件上有好多原生的属性和事件 -->
    <BaseInput :value="value"
    label="密码" placeholder="place input your password"
    @input="handleInput" @focus="handleFocus">
    </BaseInput>
  </div>
</template>

<!-- 子组件写法 -->
<template>
  <label>
    {{lable}}
    <input :value="value"
      :placeholder="placeholder"
      @focus="$emit('focus', $event)"
      @input="$emit('input', $event.target.value)"
    >
    <!-- 这些原生事件实质是被代理的一层,从而导致了很多的冗余代码,其实我们可以利用两个简写手段,避免这种无意义的代理,直接传入 -->
  </label>
</template>
  • 优化点1:Dom的原生属性可以通过$attrs这个API来实现非声明式传递。$attr包含的是父作用域中不作为prop被识别的(class/style除外)特性。
  • 优化点2:Dom的原生事件可以通过$listeners实现非声明式传入,$listeners包含了父作用域中不含.native修饰器的事件监听(v-on:),如果是更多层级,可以通过v-on="$listeners"一层层传递到组件内部。
  • 注意:默认父作用与不被认为是props的属性将会回退到子组件的根元素上,也就是例子中的label上,需在当前子组件的Vue内部设置inheritAttrs: false

good

<!-- 父组件保持不变,子组件优化写法如下 -->
<template>
    <input :value="value" v-bind="$attrs" v-on="selfListeners">
</template>
<script>
  export default {
    inheritAttrs: false,
    computed: {
      selfListeners() {
        return {
          ...this.$listeners,
          input: event => this.$emit('input', event.target.value)
        }
      }
    }
  }
</script>

使用Render函数来组织渲染逻辑

教程中的例子是关于省略掉根元素来考虑的,其实这种写法应该是更贴近React的思路,所以学会用js来生成HTML

函数式组件的render的写法

// 注意,如果使用这种JSX的写法,要引入`babel-plugin-transform-vue-jsx`这个插件
// 根据最新的这个插件文档,已经不用在第一个参数上传递`createElement`这个h参数了
Vue.component('my-router', {
  functional: true,
  // context参数代表上下文,里面有属性props
  render(context) {
    return context.props.routes.map(route =>
      <li key={route.name}>
        <router-link to={route}>{route.title}</router-link>
      </li>
    )
  }
})

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

13310
来自专栏超然的博客

事件委托和this

  事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主...

14530
来自专栏nice_每一天

如何编写高效的jQuery代码(转载)

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使...

8120
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

11910
来自专栏web前端

Vuejs --02 Vue实例

一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

23880
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

29970
来自专栏前端说吧

CSS3中的animation动画

31150
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

11040
来自专栏Modeng的专栏

Vue2.5笔记:v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生,Vue中也借鉴了指令这一特性,在 Vue 中指令都是带有 v-的特殊属性,那么指令有什么作用呢?

9710
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

17240

扫码关注云+社区

领取腾讯云代金券