两只黄鹂鸣翠柳，一堆bug上西天。

每天下班写着反复的代码，当一个cv仔，忙到八九点，工作效率低，感觉本人没有任何晋升。如何能更快的实现手头的工作，明天小编整顿了一些新的Vue应用技巧。你们先加班，我先上班陪女神去逛街了。

hookEvent,原来能够这样监听组件生命周期

1. 外部监听生命周期函数

明天产品经理又给我甩过去一个需要，须要开发一个图表，拿到需要，瞄了一眼，而后我就去echarts官网复制示例代码了，复制完改了改差不多了，改完代码长这样

<template>  <div class="echarts"></div></template><script>  export default {   mounted() {     this.chart = echarts.init(this.$el)      // 申请数据，赋值数据 等等一系列操作...      // 监听窗口发生变化，resize组件     window.addEventListener('resize',this.$_handleResizeChart)  },  updated() {    // 干了一堆活  },  created() {     // 干了一堆活  },  beforeDestroy() {    // 组件销毁时，销毁监听事件    window.removeEventListener('resize', this.$_handleResizeChart)  },  methods: {    $_handleResizeChart() {     this.chart.resize()    },  // 其余一堆办法 }}</script>

性能写完开开心心的提测了，测试没啥问题，产品经理示意做的很棒。然而code review时候，技术大佬说了，这样有问题。

大佬：这样写不是很好，应该将监听resize事件与销毁resize事件放到一起，当初两段代码离开而且相隔几百行代码，可读性比拟差我：那我把两个生命周期钩子函数地位换一下，放到一起?大佬：hook听过没？我：Vue3.0才有啊，咋，咱要降级Vue?

而后技术大佬就不理我了,并向我扔过去一段代码

export default {  mounted() {    this.chart = echarts.init(this.$el)    // 申请数据，赋值数据 等等一系列操作...    // 监听窗口发生变化，resize组件    window.addEventListener('resize', this.$_handleResizeChart)    // 通过hook监听组件销毁钩子函数，并勾销监听事件    this.$once('hook:beforeDestroy', () => {      window.removeEventListener('resize', this.$\_handleResizeChart)    })  },  updated() {},  created() {},  methods: {    $_handleResizeChart() {      this.chart.resize()    }  }}

看完代码，豁然开朗，大佬不愧是大佬，原来`Vue`还能够这样监听生命周期函数。

_在`Vue`组件中，能够用过`$on\`,\`$once`去监听所有的生命周期钩子函数，如监听组件的`updated`钩子函数能够写成 `this.$on('hook:updated', () => {})`_

2. 内部监听生命周期函数

明天共事在公司群里问，想在内部监听组件的生命周期函数，有没有方法啊？

为什么会有这样的需要呢，原来共事用了一个第三方组件，须要监听第三方组件数据的变动，然而组件又没有提供change事件，共事也没方法了，才想进去要去在内部监听组件的updated钩子函数。查看了一番材料，发现Vue反对在内部监听组件的生命周期钩子函数。

<template>   <!--通过@hook:updated监听组件的updated生命钩子函数-->   <!--组件的所有生命周期钩子都能够通过@hook:钩子函数名 来监听触发-->   <custom-select @hook:updated="$_handleSelectUpdated" /></template><script>  import CustomSelect from '../components/custom-select'  export default {     components: {        CustomSelect     },   methods: {     $_handleSelectUpdated() {       console.log('custom-select组件的updated钩子函数被触发')     }   } }</script>

小我的项目还用Vuex?用Vue.observable手写一个状态治理吧

在前端我的项目中，有许多数据须要在各个组件之间进行传递共享，这时候就须要有一个状态管理工具，个别状况下，咱们都会应用Vuex，但对于小型我的项目来说，就像Vuex官网所说：“如果您不打算开发大型单页利用，应用 Vuex 可能是繁琐冗余的。的确是如此——如果您的利用够简略，您最好不要应用 Vuex”。这时候咱们就能够应用Vue2.6提供的新API Vue.observable手动打造一个Vuex

1. 创立 store

import Vue from 'vue'// 通过Vue.observable创立一个可响应的对象export const store = Vue.observable({  userInfo: {},  roleIds: []})// 定义 mutations, 批改属性export const mutations = {   setUserInfo(userInfo) {     store.userInfo = userInfo   },   setRoleIds(roleIds) {     store.roleIds = roleIds   }}

2. 在组件中援用

<template>   <div>     {{ userInfo.name }}   </div></template><script>  import { store, mutations } from '../store'  export default {    computed: {      userInfo() {        return store.userInfo       }   },   created() {     mutations.setUserInfo({       name: '子君'     })   }}</script>

开发全局组件，你可能须要理解一下Vue.extend

Vue.extend是一个全局Api,平时咱们在开发业务的时候很少会用到它，但有时候咱们心愿能够开发一些全局组件比方Loading,Notify,Message等组件时，这时候就能够应用Vue.extend。

同学们在应用element-ui的loading时，在代码中可能会这样写

// 显示loadingconst loading = this.$loading()// 敞开loadingloading.close()

这样写可能没什么特地的，然而如果你这样写

const loading = this.$loading()const loading1 = this.$loading()setTimeout(() => {  loading.close()}, 1000 * 3)

这时候你会发现，我调用了两次loading,然而只呈现了一个，而且我只敞开了loading，然而loading1也被敞开了。这是怎么实现的呢？咱们当初就是用Vue.extend + 单例模式去实现一个loading

1. 开发loading组件

<template>  <transition name="custom-loading-fade">    <!--loading蒙版-->    <div v-show="visible" class="custom-loading-mask">      <!--loading两头的图标-->      <div class="custom-loading-spinner">        <i class="custom-spinner-icon"></i>        <!--loading下面显示的文字-->        <p class="custom-loading-text">{{ text }}</p>      </div>    </div>  </transition></template><script>export default {  props: {  // 是否显示loading    visible: {      type: Boolean,      default: false    },    // loading下面的显示文字    text: {      type: String,      default: ''    }  }}</script>

开发进去loading组件之后，如果须要间接应用，就要这样去用

<template>  <div class="component-code">    <!--其余一堆代码-->    <custom-loading :visible="visible" text="加载中" />  </div></template><script>export default {  data() {    return {      visible: false    }  }}</script>

但这样应用并不能满足咱们的需要

  1. 能够通过js间接调用办法来显示敞开
  2. loading能够将整个页面全副遮罩起来

2.通过Vue.extend将组件转换为全局组件

1. 革新loading组件，将组件的props改为data

export default {  data() {    return {      text: '',      visible: false    }  }}

2. 通过Vue.extend革新组件

// loading/index.jsimport Vue from 'vue'import LoadingComponent from './loading.vue'// 通过Vue.extend将组件包装成一个子类const LoadingConstructor = Vue.extend(LoadingComponent)let loading = undefinedLoadingConstructor.prototype.close = function() {  // 如果loading 有援用，则去掉援用  if (loading) {    loading = undefined  }  // 先将组件暗藏  this.visible = false  // 提早300毫秒，期待loading敞开动画执行完之后销毁组件  setTimeout(() => {    // 移除挂载的dom元素    if (this.$el && this.$el.parentNode) {      this.$el.parentNode.removeChild(this.$el)    }    // 调用组件的$destroy办法进行组件销毁    this.$destroy()  }, 300)}const Loading = (options = {}) => {  // 如果组件已渲染，则返回即可  if (loading) {    return loading  }  // 要挂载的元素  const parent = document.body  // 组件属性  const opts = {    text: '',    ...options  }  // 通过构造函数初始化组件 相当于 new Vue()  const instance = new LoadingConstructor({    el: document.createElement('div'),    data: opts  })  // 将loading元素挂在到parent下面  parent.appendChild(instance.$el)  // 显示loading  Vue.nextTick(() => {    instance.visible = true  })  // 将组件实例赋值给loading  loading = instance  return instance}export default Loading

3. 在页面应用loading

import Loading from './loading/index.js'export default {  created() {    const loading = Loading({ text: '正在加载。。。' })    // 三秒钟后敞开    setTimeout(() => {      loading.close()    }, 3000)  }}

通过下面的革新，loading曾经能够在全局应用了，如果须要像element-ui一样挂载到Vue.prototype下面，通过this.$loading调用，还须要革新一下

4. 将组件挂载到Vue.prototype下面

Vue.prototype.$loading = Loading// 在export之前将Loading办法进行绑定export default Loading// 在组件内应用this.$loading()

自定义指令，从底层解决问题

什么是指令？指令就是你女朋友指着你说，“那边搓衣板，跪下，这是命令！”。开玩笑啦，程序员哪里会有女朋友。

通过上一节咱们开发了一个loading组件，开发完之后，其余开发在应用的时候又提出来了两个需要

  1. 能够将loading挂载到某一个元素下面，当初只能是全屏应用
  2. 能够应用指令在指定的元素下面挂载loading

有需要，咱就做，没话说

1.开发v-loading指令

import Vue from 'vue'import LoadingComponent from './loading'// 应用 Vue.extend结构组件子类const LoadingContructor = Vue.extend(LoadingComponent)// 定义一个名为loading的指令Vue.directive('loading', {  /**   * 只调用一次，在指令第一次绑定到元素时调用，能够在这里做一些初始化的设置   * @param {*} el 指令要绑定的元素   * @param {*} binding 指令传入的信息，包含 {name:'指令名称', value: '指令绑定的值',arg: '指令参数 v-bind:text 对应 text'}   */  bind(el, binding) {    const instance = new LoadingContructor({      el: document.createElement('div'),      data: {}    })    el.appendChild(instance.$el)    el.instance = instance    Vue.nextTick(() => {      el.instance.visible = binding.value    })  },  /**   * 所在组件的 VNode 更新时调用   * @param {*} el   * @param {*} binding   */  update(el, binding) {    // 通过对比值的变动判断loading是否显示    if (binding.oldValue !== binding.value) {      el.instance.visible = binding.value    }  },  /**   * 只调用一次，在 指令与元素解绑时调用   * @param {*} el   */  unbind(el) {    const mask = el.instance.$el    if (mask.parentNode) {      mask.parentNode.removeChild(mask)    }    el.instance.$destroy()    el.instance = undefined  }})

2.在元素下面应用指令

<template>  <div v-loading="visible"></div></template><script>export default {  data() {    return {      visible: false    }  },  created() {    this.visible = true    fetch().then(() => {      this.visible = false    })  }}</script>

3.我的项目中哪些场景能够自定义指令

  1. 为组件增加loading成果
  2. 按钮级别权限管制 v-permission
  3. 代码埋点,依据操作类型定义指令
  4. input输入框主动获取焦点
  5. 其余等等。。。

深度watch与watch立刻触发回调,我能够监听到你的一举一动

在开发Vue我的项目时，咱们会经常性的应用到watch去监听数据的变动，而后在变动之后做一系列操作。

1.根底用法

比方一个列表页，咱们心愿用户在搜寻框输出搜寻关键字的时候，能够主动触发搜寻,此时除了监听搜寻框的change事件之外，咱们也能够通过watch监听搜寻关键字的变动

<template>  <!--此处示例应用了element-ui-->  <div>    <div>      <span>搜寻</span>      <input v-model="searchValue" />    </div>    <!--列表，代码省略-->  </div></template><script>export default {  data() {    return {      searchValue: ''    }  },  watch: {    // 在值发生变化之后，从新加载数据    searchValue(newValue, oldValue) {      // 判断搜寻      if (newValue !== oldValue) {        this.$_loadData()      }    }  },  methods: {    $_loadData() {      // 从新加载数据，此处须要通过函数防抖    }  }}</script>

2.立刻触发

通过下面的代码，当初曾经能够在值发生变化的时候触发加载数据了，然而如果要在页面初始化时候加载数据，咱们还须要在created或者mounted生命周期钩子外面再次调用$_loadData办法。不过，当初能够不必这样写了，通过配置watch的立刻触发属性，就能够满足需要了

// 革新watchexport default {  watch: {    // 在值发生变化之后，从新加载数据    searchValue: {    // 通过handler来监听属性变动, 首次调用 newValue为""空字符串， oldValue为 undefined      handler(newValue, oldValue) {        if (newValue !== oldValue) {          this.$_loadData()        }      },      // 配置立刻执行属性      immediate: true    }  }}

3.深度监听（我能够看到你心田的一举一动）

一个表单页面，需要心愿用户在批改表单的任意一项之后，表单页面就须要变更为被批改状态。如果依照上例中watch的写法，那么咱们就须要去监听表单每一个属性，太麻烦了，这时候就须要用到watch的深度监听deep

export default {  data() {    return {      formData: {        name: '',        sex: '',        age: 0,        deptId: ''      }    }  },  watch: {    // 在值发生变化之后，从新加载数据    formData: {      // 须要留神，因为对象援用的起因， newValue和oldValue的值始终相等      handler(newValue, oldValue) {        // 在这里标记页面编辑状态      },      // 通过指定deep属性为true, watch会监听对象外面每一个值的变动      deep: true    }  }}

随时监听，随时勾销，理解一下$watch

有这样一个需要，有一个表单，在编辑的时候须要监听表单的变动，如果发生变化则保留按钮启用，否则保留按钮禁用。这时候对于新增表单来说，能够间接通过watch去监听表单数据(假如是formData),如上例所述，但对于编辑表单来说，表单须要回填数据，这时候会批改formData的值，会触发watch,无奈精确的判断是否启用保留按钮。当初你就须要理解一下$watch

export default {  data() {    return {      formData: {        name: '',        age: 0      }    }  },  created() {    this.$_loadData()  },  methods: {    // 模仿异步申请数据    $_loadData() {      setTimeout(() => {        // 先赋值        this.formData = {          name: '子君',          age: 18        }        // 等表单数据回填之后，监听数据是否发生变化        const unwatch = this.$watch(          'formData',          () => {            console.log('数据产生了变动')          },          {            deep: true          }        )        // 模仿数据产生了变动        setTimeout(() => {          this.formData.name = '张三'        }, 1000)      }, 1000)    }  }}

依据上例能够看到，咱们能够在须要的时候通过this.$watch来监听数据变动。那么如何勾销监听呢，上例中this.$watch返回了一个值unwatch,是一个函数，在须要勾销的时候，执行 unwatch()即可勾销

函数式组件，函数是组件？

什么是函数式组件？函数式组件就是函数是组件，感觉在玩文字游戏。应用过React的同学，应该不会对函数式组件感到生疏。函数式组件，咱们能够了解为没有外部状态，没有生命周期钩子函数，没有this(不须要实例化的组件)。

在日常写bug的过程中，常常会开发一些纯展现性的业务组件，比方一些详情页面，列表界面等，它们有一个独特的特点是只须要将内部传入的数据进行展示，不须要有外部状态，不须要在生命周期钩子函数外面做解决，这时候你就能够思考应用函数式组件。

1. 先来一个函数式组件的代码

export default {  // 通过配置functional属性指定组件为函数式组件  functional: true,  // 组件接管的内部属性  props: {    avatar: {      type: String    }  },  /**   * 渲染函数   * @param {*} h   * @param {*} context 函数式组件没有this, props, slots等都在context下面挂着   */  render(h, context) {    const { props } = context    if (props.avatar) {      return <img src={props.avatar}></img>    }    return <img src="default-avatar.png"></img>  }}

在上例中，咱们定义了一个头像组件，如果内部传入头像，则显示传入的头像，否则显示默认头像。下面的代码中大家看到有一个render函数，这个是Vue应用JSX的写法，对于JSX,小编将在后续文章中会出具体的应用教程。

2.为什么应用函数式组件

  1. 最次要最要害的起因是函数式组件不须要实例化，无状态，没有生命周期，所以渲染性能要好于一般组件
  2. 函数式组件构造比较简单，代码构造更清晰

3. 函数式组件与一般组件的区别

  1. 函数式组件须要在申明组件是指定functional
  2. 函数式组件不须要实例化，所以没有this,this通过render函数的第二个参数来代替
  3. 函数式组件没有生命周期钩子函数，不能应用计算属性，watch等等
  4. 函数式组件不能通过$emit对外裸露事件，调用事件只能通过context.listeners.click的形式调用内部传入的事件
  5. 因为函数式组件是没有实例化的，所以在内部通过ref去援用组件时，理论援用的是HTMLElement
  6. 函数式组件的props能够不必显示申明，所以没有在props外面申明的属性都会被主动隐式解析为prop,而一般组件所有未声明的属性都被解析到$attrs外面，并主动挂载到组件根元素下面(能够通过inheritAttrs属性禁止)

4.我不想用JSX，能用函数式组件吗？

在Vue2.5之前，应用函数式组件只能通过JSX的形式，在之后，能够通过模板语法来生命函数式组件

<!--在template 下面增加 functional属性--><template functional>  <img :src="props.avatar ? props.avatar : 'default-avatar.png'" /></template><!--依据上一节第六条，能够省略申明props-->

结语：

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高