关于vue.js:实战技巧Vue原来还可以这样写

两只黄鹂鸣翠柳，一堆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时，在代码中可能会这样写

// 显示loading
const loading = this.$loading()
// 敞开loading
loading.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>

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

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

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

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

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

2. 通过`Vue.extend`革新组件

// loading/index.js
import Vue from 'vue'
import LoadingComponent from './loading.vue'

// 通过Vue.extend将组件包装成一个子类
const LoadingConstructor = Vue.extend(LoadingComponent)

let loading = undefined

LoadingConstructor.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组件，开发完之后，其余开发在应用的时候又提出来了两个需要

能够将loading挂载到某一个元素下面，当初只能是全屏应用
能够应用指令在指定的元素下面挂载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.我的项目中哪些场景能够自定义指令

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

深度`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的立刻触发属性，就能够满足需要了

// 革新watch
export 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.为什么应用函数式组件

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

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

函数式组件须要在申明组件是指定functional
函数式组件不须要实例化，所以没有this,this通过render函数的第二个参数来代替
函数式组件没有生命周期钩子函数，不能应用计算属性，watch等等
函数式组件不能通过$emit对外裸露事件，调用事件只能通过context.listeners.click的形式调用内部传入的事件
因为函数式组件是没有实例化的，所以在内部通过ref去援用组件时，理论援用的是HTMLElement
函数式组件的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-->

结语：

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

关于vue.js:实战技巧Vue原来还可以这样写

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

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

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

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

1. 创立 `store`

2. 在组件中援用

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

1. 开发`loading`组件

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

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

2. 通过`Vue.extend`革新组件

3. 在页面应用loading

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

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

1.开发`v-loading`指令

2.在元素下面应用指令

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

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

1.根底用法

2.立刻触发

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

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

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

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

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

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

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

结语：

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:实战技巧Vue原来还可以这样写

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

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

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

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

1. 创立 store

2. 在组件中援用

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

1. 开发loading组件

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

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

2. 通过Vue.extend革新组件

3. 在页面应用loading

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

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

1.开发v-loading指令

2.在元素下面应用指令

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

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

1.根底用法

2.立刻触发

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

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

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

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

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

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

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

结语：

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

1. 创立 `store`

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

1. 开发`loading`组件

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

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

2. 通过`Vue.extend`革新组件

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

1.开发`v-loading`指令

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

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

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

发表回复取消回复