学习内容：
（1）如何去编写 Vue 里面自定义的指令
自定义的指令我们把它叫做directive。比如说在Vue里面我写一个input标签， 比如说我希望在页面一加载的时候，input标签就能处于一个focus的状态，我们可以怎么写呢？
我们可以这么去写：
我们可以写个mounted， 然后在这里我们要给它加一个 ref 巴拉巴拉，
在 Vue 里面，如果我们对 dom 做一些简单的处理操作的时候，我们可以用refs去写这样的代码，这是没问题的，
可是如果这么写代码，这种自动的聚焦的逻辑其实没法被复用，比如对 dom 的一些操作，其实我们可以通过封装一些自定义指令来实现dom 的逻辑的一些复用，
比如说我再写一个input框 叫input1：
那么其实你要再去写一个refs点input1点focus，把这个逻辑再写一遍，
但是如果我们用指令可能就不需要这么去写了，【指令能解决代码复用】
我们去写一个指令，怎么写？我们来定义一个全局指令app.directive("fouc") 。然后指令的名字，我们把它叫做focus，这里面我们可以接一些东西，这里可以写一些生命周期函数，比如说mounted，
mounted这个函数可以接受一个el元素，在这里我可以让el点focus一下就可以了：
其实通过这种语法我们定义了一个focus指令，那么我在input框上，如果想用这个focus指令，我就可以非常简单的去写我们的代码了，直接v-focus就可以了:
我们先不管这个逻辑到底是怎么一回事，我们先把 v-focus，我们自定义的 Vue 的指令写好了之后到浏览器打开，
然后我们刷新一下页面，大家会发现同样的一个自动聚焦的效果也出现了:
这个自定义指令是怎么实现的？ 首先我定义了一个叫做focus 这样的自定义指令，我如果想用它怎么用?
v-focus 就可以了。v-focus 就是使用我自定义的 focus指令，它会干一件事情，它会有一个生命周期函数叫做mounted，
指的是当我指令挂载到某一个dom 元素上的时候，当这个元素被挂载到页面之后，mounted 生命周期函数会自动的执行，执行的时候会接收第一个参数叫做el，就是当前的 input元素，
我等它挂载之后它自动的执行，我就把el点focus执行一下。那么input框就自己实现了一个聚焦的效果，所以这就是自定义指定的基础的实现。
当然这种自定义指令的定义它是一个全局的自定义指令：
也就是说如果你这么去定义在任何地方都可以使用v-focus，你也可以定义一个局部的自定义指令，我们可以写一下。
在这里我定义一个常量叫做directives，然后让ta等于一个花括号{}，
里面我们写一个focus这样的指令：
我定义了一个局部的定义指令，但是我在 app 里面并没有使用局部的 app 指令，所以现在v-focus应该是不好用的。我们刷一下:
说created of undefined，因为什么呢？
因为你v-focus指令，现在你并没有去使用局部指令，但如果你想使用局部指令，你怎么去使用？
很简单，你只要在这写一个directives，让它等于谁？等于你上面定义的 directives 就行了：
如果两个键和值都一样，直接写一个directives就可以了：
这样定义的指令我们把它叫做一个局部指令，如果你想用这个指令的话，在一个组件或者一个实例里面，你需要通过directives冒号指定你对应的指令来去使用:
如果你不指定的话，你是没法用v-focus的。
它和局部组件以及我们之前讲的局部 mixin 的逻辑基本上是一致的。
在指令里面，我们除了有mounted这样的生命周期函数，其实还有很多其他的生命周期函数，
比如说beforeMounted，beforeMounted指的是当你这个元素即将挂载到页面的时候，还没有挂载的时候，这个时候会执行beforeMounted这样的内容，比如说我可以打印一下:
然后还有beforeUpdate。我们在这写一个beforeUpdate，还有一个updated，它指的是当你 input元素重新去更新渲染的时候，还没有渲染之前，我这块会输出beforeUpdate，
如果已经重新渲染了，我会输出updated:
这块我们做一个实验:
我在外层比如说包一个div 巴拉巴拉，
然后我们刷一下页面：
它说我不能直接去这么用的，
这个时候页面会更新，页面更新的话，你的刚才显示的input它会隐藏，会重新的去渲染，那么在重新渲染的时候beforeUpdate，也就是说在重新渲染之前，beforeUpdate会先执行，updated会后执行。
当然还有的时候，你会把这样的一个 dom 直接销毁对吧， 或者说直接的手动的对这些div元素或者input元素做一些销毁。
那么当这个元素即将被销毁的时候，有一个生命周期函数叫做beforeUnmount 会执行:
beforeUnmount 当它真正的被销毁之后，有一个unmounted这样的生命周期函数会被自动的执行:
我们怎么去试验一下，我们可以把v-show改成为v-if:
如果是v-if，input框应该会在它等于false的时候直接被销毁。
那么理论上 beforeUnmount 它应该会被执行，我们试验一下，刷新页面，
然后我去调vm点巴拉巴拉：
beforeUnmount和unmounted 会被执行，当div标签即将被销毁的时候，beforeUnmount它会执行，那销毁了之后 unmounted 就会被执行。
原文始发于微信公众号（基根奋斗营）：【Vue】开发实现 Vue 中的自定义指令（1）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/104249.html
