vue可复用性

mixin混入

合并规则

1. data在内部会进行递归合并，并在发生冲突时以组件数据优先。
2. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时以组件数据优先。
3. 同名生命周期函数将合并为一个数组，依次调用。另外，混入对象的钩子将在组件自身钩子之前调用。

局部混入

App.vue

<template>
  <div>
    <h1>{{ msg }}h1>
    <button @click="handleClick">按钮button>
  div>
template>

<script>
import mixinTest from '@/mixin/mixinTest.js'
export default {
  // 局部混入
  mixins: [mixinTest],
  // 定义自己组件的数据方法等：
  data() {
    return {
      msg: 'hi'
    }
  },
  created() {
    console.log('App.vue:生命周期函数created()');
  },
  methods: {
    handleClick() {
      console.log('App.vue:methods中的handleClick方法');
    }
  }
}

script>

将混入的对象封装到单独模块中
mixinTest.js

export default {
  data() {
    return {
      message: 'mixin:data中的message'
    }
  },
  created() {
    console.log('mixin:生命周期函数created()');
  },
  methods: {
    handleClick() {
      console.log('mixin:methods中的handleClick方法');
    }
  }
}

全局混入

在入口文件中写混入对象，将影响每一个之后创建的 Vue 实例

const app = createApp(App)
app.mixin({
  created(){
    console.log('global:生命周期函数created()');
  }
})

app.mount('#app')

自定义指令

自定义指令

插件