1. 外部窃听心灵指数函数
<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手写一个状态管理吧
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时，在代码中可能会这样写
// 显示loadingconst 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
开发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可以将整个页面全部遮罩起来通过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调用，还需要改造一下
将模块挂载到Vue.prototype上面
Vue.prototype.$loading = Loading
// 在export之前将Loading方法进行绑定
export default Loading
// 在模块内使用
this.$loading()
什么是指令？指令就是你女朋友指着你说，“那边搓衣板，跪下，这是命令！”。开玩笑啦，程序员哪里会有女朋友。
通过上一节我们开发了一个loading模块，开发完之后，其他开发在使用的时候又提出来了两个需求
可以将loading挂载到某一个元素上面，现在只能是全屏使用可以使用指令在指定的元素上面挂载loading 有需求，咱就做，没话说
开发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>
项目中哪些场景可以自定义指令
深度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
}
}
}
什么是函数式模块？函数式模块就是函数是模块，感觉在玩文字游戏。使用过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属性禁止)我不想用JSX，能用函数式模块吗？
在Vue2.5之前，使用函数式模块只能通过JSX的方式，在之后，可以通过模板语法来心灵函数式模块
<!–在template 上面添加 functional属性–>
<template functional>
<img :src=“props.avatar ? props.avatar : default-avatar.png” />
</template>
<!–根据上一节第六条，可以省略声明props–>
最后我想说：
❝不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
