什么是指令？指令就是你女朋友指着你说，“那边搓衣板，跪下，这是命令！”。开玩笑啦，程序员哪里会有女朋友。通过上一节我们开发了一个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>
项目中哪些场景可以自定义指令
- 为组件添加loading效果
- 按钮级别权限控制 v-permission
- 代码埋点,根据操作类型定义指令
- input输入框自动获取焦点
- 其他等等。。。
在开发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()即可取消
本文使用 mdnice 排版
什么是函数式组件？函数式组件就是函数是组件，感觉在玩文字游戏。使用过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等等函数式组件不能通过attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs`属性禁止)
我不想用JSX，能用函数式组件吗？
在Vue2.5之前，使用函数式组件只能通过JSX的方式，在之后，可以通过模板语法来生命函数式组件
<!--在template 上面添加 functional属性-->
<template functional>
<img :src="props.avatar ? props.avatar : 'default-avatar.png'" />
</template>
<!--根据上一节第六条，可以省略声明props-->
最后我想说：
❝ 不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。——文森特・梵高
文章引子
https://juejin.im/post/5eef7799f265da02cd3b82fe?utm_source=gold_browser_extension
