学习笔记之------Vue（3）

混入

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

var obj = {
    data:function(){
        return {
          name:'zhangsan'
        }
    }
}
export default {
  mixins:[obj]
}

选项合并

当组件和 mixin 对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，每个 mixin 可以拥有自己的 data 函数。每个 data 函数都会被调用，并将返回结果合并。在数据的 property 发生冲突时，会以组件自身的数据为优先。

var obj = {
data:function(){
    return {
      name:'zhangsan'
    }
}
}
export default {
  mixins:[obj],
  data:function(){
    return {
      name:'lisi'//优先
    }
  }
}

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局mixin

你还可以为 Vue 应用程序全局应用 mixin：

createApp(App).mixin(obj).use(store).use(router).mount('#app')

Mixin 也可以进行全局注册。使用时格外小心！一旦使用全局 mixin，它将影响每一个之后创建的组件 (例如，每个子组件)。

自定义指令

在VUE中，我们可以在实例的directive属性中，自定义指令，这些指令可以被该实例使用；
如果是全局注册话，那么所有的子组件都可以使用！
在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使我们正与类似的事件钩子，我们现在把它们统一起来了：

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // 新增
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // 新增
  updated() {},
  beforeUnmount() {}, // 新增
  unmounted() {}
}

指令创建

directives:{
    focus:{
      mounted(el, binding, vnode) {
        el.focus()
      }
    }
}

指令钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个