关于组合式API和Vue2中Mixin混入的理解

TopfunPlus
140 阅读3分钟

混入，顾名思义，就是能够在独立的JS文件中维护一个对象，这个对象能够被"掺杂"到Vue的实例对象中，如下面代码:

export default {
  name: "SearchOption",
  mixins: [mixin_search_option],
  props: {
    //弹出框的标题
    title: '',
    //图标信息
    icon: {
      type: String,
      default: 'el-icon-search'
    },
    disable: false,
    //查询条件
    queryInfo: '',
    queryName: '',
    //查询标签
    queryLabel: '',
  },
  ...

这个SFC中导出了一个对象，其中，我们使用mixin混入了一个名为mixin_search_option的混入对象，如下：

export var mixin_search_option = {
  data: function () {
    return {
      tableData: [],
    }
  },
  methods: {
    getTableData() {
      this.getData({...this.limitInfo, pageNum: this.pageNum, pageSize: this.pageSize})
        ....
    },
  },
}

那么这个对象的逻辑就会被 "塞入" 到引入该混入的组件实例中

关于组合式API 组合式函数：

. 组合式 API 的设计思想

组合式 API 的设计思想是：将组件逻辑和状态管理通过函数进行封装，这样可以更好地复用和组织逻辑。这与传统的选项式 API （如 data、methods、mounted 等）不同，它允许你在函数外部执行一些 Vue 的特定操作，包括响应式数据、生命周期钩子等。

2. 为什么 onMounted 可以在外部函数中使用？

在 Vue 3 的实现中，组合式 API 通过 内部上下文（Context） 来管理生命周期。这意味着当你调用 onMounted 或其他生命周期钩子时，Vue 会在内部追踪这些钩子，并自动将它们关联到当前的组件实例中。以下是详细的工作流程：

  1. 上下文环境: 当你在组件的 setup 函数中调用 useMouse（或其他组合式函数）时，Vue 会为这个 setup 函数提供一个组件上下文，onMounted 等生命周期钩子就是通过这个上下文工作。
  2. 生命周期钩子注册: 当 onMounted 被调用时，它会将传入的回调函数注册到当前组件实例的生命周期中，这样当该组件挂载时，Vue 会自动执行这些回调。
  3. 组合逻辑复用: 因为 onMounted 并不直接依赖组件的其他部分，它只关心当前组件的生命周期。所以你可以将 onMounted 放在任何组合式函数中，并在不同的组件中复用这些函数。Vue 内部负责将这些钩子函数与具体的组件生命周期绑定。

3. 实际流程示例

假设我们有以下组件和组合式函数：

组合式函数 useMouse.js

js
复制代码
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

组件文件 MyComponent.vue

js
复制代码
<template>
  <div>Mouse X: {{ x }}, Mouse Y: {{ y }}</div>
</template>

<script>
import { useMouse } from './useMouse'

export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  }
}
</script>

在 MyComponent.vue 的 setup 函数中，调用了 useMouse。这时 Vue 自动将 onMounted 钩子关联到 MyComponent 的生命周期中，所以当 MyComponent 被挂载时，useMouse 内的 onMounted 会被执行。

4. 对比选项式 API

在传统的选项式 API 中，生命周期钩子是直接定义在组件对象内部的，例如：

js
复制代码
export default {
  mounted() {
    // 在组件挂载时执行
  }
}

而在组合式 API 中，生命周期钩子通过 onMounted 这样的方法进行注册。这种方式的优势在于：

  • 逻辑复用: 可以将相同的逻辑封装到函数中，并在多个组件中共享。
  • 逻辑分离: 使得逻辑的封装更加模块化，避免了复杂组件中的代码散乱在多个选项中。

总结

onMounted 能在外部函数中操作 Vue 生命周期，是因为 Vue 3 组合式 API 背后的设计理念，它允许开发者将组件逻辑封装成模块化的函数，并通过上下文环境自动绑定到具体组件的生命周期上。这样不仅实现了代码复用，还保持了逻辑的清晰和灵活性。

avatar
文章
阅读
粉丝