vue3.0从入门到进阶(二)混入与指令入门与理解

学习vue的同学对于混入(mixin)，和指令(directive)的运用应该比较少，他们也是数据的传输的几种方式之一。

首先我们来看下混入是什么样的实现。

为什么要使用混入

就是为了实现多个组件之间有相同的方法，实现复用，少写重复的代码。

在第一节的基础上，我们创建一个混入的对象

//创建一个混入
const myMixin = {
        created() {
            this.hello()
        },
        methods: {
            hello() {
                console.log('hello from mixin!')
            }
        }
    }
const Counter = {
        mixins: [myMixin],
}

Counter组件间是没有created生命周期的，使用了混入就有了这样的生命周期，也会正常的被触发。
那么Counter如果有created，又混入了created那么执行的结果会是怎样的呢？

mixins: [myMixin],
        created() {
            this.hello1()
        },
methods: {
            hello1() {
                console.log("我是counter组件自己的created")
            }
}

结果显示，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。官网提示我们要慎用混入，必须对使用混入的组件要了解清楚，以免引起不必要的bug

自定义指令

vue指令是以v-开头的在html标签上或自定义组件上的属性，
那么如何定义一个自定义指令呢

现在实现一个指令，页面打开时，这个输入框自动聚焦，光标闪烁…

<input v-focus v-model="text" placeholder="what will to do" @keyup.enter="addItem" />

//注册全局指令
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})
//全部注册，要跟vue的生命周期等钩子平级
directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }
}

注意对比下vue2

v3的指令生命周期

. beforeMount 当指令第一次绑定到元素并且在挂载父组件之前调用
. mounted 在挂载绑定元素的父组件时调用。
. beforeUpdate
. updated
. beforeUnmount
. unmounted

发生了些许的变化。这里要注意到！