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

6次阅读

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

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

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

明天产品经理又给我甩过去一个需要，须要开发一个图表，拿到需要，瞄了一眼，而后我就去 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’, () => {})`_

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

为什么会有这样的需要呢，原来共事用了一个第三方组件，须要监听第三方组件数据的变动，然而组件又没有提供 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}
}

<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

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

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

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

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

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

比方一个列表页，咱们心愿用户在搜寻框输出搜寻关键字的时候，能够主动触发搜寻, 此时除了监听搜寻框的 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>

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

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

一个表单页面，需要心愿用户在批改表单的任意一项之后，表单页面就须要变更为被批改状态。如果依照上例中 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 的过程中，常常会开发一些纯展现性的业务组件，比方一些详情页面，列表界面等，它们有一个独特的特点是只须要将内部传入的数据进行展示，不须要有外部状态，不须要在生命周期钩子函数外面做解决，这时候你就能够思考应用函数式组件。

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, 小编将在后续文章中会出具体的应用教程。

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

函数式组件须要在申明组件是指定 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.js

2020-07-20

0

关于vue.js:vue路由传参

关于vue.js:vue组件通信方式有哪些

关于vue.js:编程鹿学Vuejs这一篇就够了万字学会通俗易懂

关于vue.js:VUE-项目在IE11白屏报错-SCRIPT1002-语法错误

关于javascript:从零搭建-Nodejs-企业级-Web-服务器零静态服务

关于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`，能用函数式组件吗？

结语：

站内搜索

关于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，能用函数式组件吗？

结语：

站内搜索

小我的项目还用 `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`，能用函数式组件吗？