YouToBe上的几个Vue的优化技巧摘录

最近看到了Youtobe上的视频，某大神总结了几个Vuejs的优化方法，取名为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

• 优化点1：Dom的原生属性可以通过$attrs这个API来实现非声明式传递。$attr包含的是父作用域中不作为prop被识别的(class/style除外)特性。
• 优化点2：Dom的原生事件可以通过$listeners实现非声明式传入，$listeners包含了父作用域中不含.native修饰器的事件监听(v-on:),如果是更多层级，可以通过v-on="$listeners"一层层传递到组件内部。
• 注意：默认父作用与不被认为是props的属性将会回退到子组件的根元素上，也就是例子中的label上，需在当前子组件的Vue内部设置inheritAttrs: false

good

使用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 =>
      

        {route.title}
      
    )
  }
})

本文博客地址：http://wlxadyl.cn/2018/04/11/four-vue-tricks/
如果这篇文章对您有帮助，欢迎到我的博客里加我微信打赏~。