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

42次阅读

共计 9601 个字符，预计需要花费 25 分钟才能阅读完成。

两只黄鹂鸣翠柳，一堆 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>

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

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

结语：

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

正文完
vue.js
发表至： vue.js
2020-07-20
 0
关于vue.js:使用vite构建Vue3组件库发布npm包
关于vue.js:Vue-Conf关于Vite的分享给我带来的启发
关于vue.js:vue原理解析二-vue初始化过程以及数据响应式梳理
关于vue.js:elementtable-无数据的时候把暂无数据-改成其他文字或图片