实战技巧，Vue原来还能够这样写

时间  2021-08-12
标签 javascript html 前端 vue java 程序员 element-ui markdown app echarts 栏目 JavaScript 繁體版
原文   原文链接

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

天天上班写着重复的代码，当一个cv仔，忙到八九点，工做效率低，感受本身没有任何提高。如何能更快的完成手头的工做，提升本身的开发效率，在上一篇《绝对干货~！学会这些Vue小技巧，能够早点下班和女神约会了》，小编整理了一些Vue开发技巧，今天小编又整理了一些新的Vue使用技巧。大家先加班，我先下班陪女神去逛街了。html

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时候，技术大佬说了，这样有问题。vue

大佬：这样写不是很好，应该将监听`resize`事件与销毁`resize`事件放到一块儿，如今两段代码分开并且相隔几百行代码，可读性比较差

 我：那我把两个生命周期钩子函数位置换一下，放到一块儿?

 大佬： `hook`听过没？

 我：`Vue3.0`才有啊，咋，咱要升级`Vue`?
复制代码

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

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', () => {})element-ui

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

今天同事在公司群里问，想在外部监听组件的生命周期函数，有没有办法啊？markdown

为何会有这样的需求呢，原来同事用了一个第三方组件，须要监听第三方组件数据的变化，可是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。app

<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手动打造一个Vuexecharts

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>
复制代码

但这样使用并不能知足咱们的需求

  1. 能够经过js直接调用方法来显示关闭
  2. 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组件，开发完以后，其余开发在使用的时候又提出来了两个需求

  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的当即触发属性，就能够知足需求了

// 改造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.为何使用函数式组件

  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-->

复制代码

结语

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

❤️ 爱心三连击

1.若是以为这篇文章还不错，来个关注、点赞、收藏三连吧，让更多的人也看到～

2.关注公众号【前端有的玩】，按期为你推送新鲜干货好文。

3.特殊阶段，带好口罩，作好我的防御。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程