vue2的mixins和vue3的hooks

• vue2的mixins和vue3的hooks
• vue2的mixins
  • vue2 mixins 钩子函数
  • vue2的Mixins是怎么使用的
• vue3的hooks
  • 什么是hooks
  • 如何使用

vue2的mixins和vue3的hooks

Vue.js 2.x 中的 mixins 和 Vue.js 3.x 中的 Composition API (包括 hooks) 是 两种不同的代码组织和复用机制。

1. Vue.js 2.x Mixins:

   • Mixins 是一种将可重用功能和逻辑注入到组件中的方式。
   • 使用 mixins 可以将一些通用的选项（如生命周期钩子、数据、方法等）封装成对象，然后混入到多个组件中。
   • 在组件选项的 mixins 数组中引入 mixins 对象，可以将 mixins 中的选项合并到组件中。
   • Mixins 中的选项会和组件本身的选项进行合并，如果出现冲突，则会按照一定的策略进行处理。
   • Mixins 的缺点是可能导致命名冲突和命名空间污染。

2. Vue.js 3.x Composition API (Hooks):

   • Composition API 是 Vue.js 3.x 中引入的一套函数式 API，用于更灵活地组织和复用组件逻辑。
   • 使用 Composition API，我们可以通过创建自定义的逻辑块（即 composition 函数）来封装相关的逻辑，并将其应用到一个或多个组件中。
   • Composition API 使用了一些新的函数，如 ref、reactive、watch 等，以及新的钩子函数 setup 来定义组件逻辑。
   • Hooks 可以将相关的逻辑聚合在一起，提高代码的可读性和维护性。
   • Composition API 的优点是可以更灵活地组织和复用逻辑，避免了命名冲突和命名空间污染的问题。

需要注意的是，Vue.js 3.x 的 Composition API 和 Vue.js 2.x 的 mixins 是不兼容的。

如果你在迁移项目或选择开发新项目时，可以根据具体需求和团队熟悉程度选择适合的版本和机制。

同时，Vue.js 3.x 的 Composition API 提供了更强大的能力和更好的开发体验，推荐在新项目中使用。

vue2的mixins

vue2 mixins 钩子函数

在 Vue.js 2.x 的 mixins 中，可以使用以下钩子函数来定义和处理组件的生命周期：

1. created: 在组件实例被创建之后调用，常用于进行数据初始化或非响应式的操作。
2. mounted: 在组件挂载到 DOM 上后调用，常用于进行 DOM 相关的操作和初始化。
3. updated: 在组件更新之后调用，当组件的数据发生变化导致重新渲染时会触发该钩子函数。
4. beforeDestroy: 在组件销毁之前调用，可以进行一些清理操作，如取消订阅、解绑事件等。
5. destroyed：在组件销毁之后调用，可以进行一些清理和资源释放的操作。

除了上述常用的钩子函数外，还有其他一些钩子函数可供使用，如beforeCreate、beforeMount等。这些钩子函数可以通过 mixins 混入到组件中，以实现相同的逻辑复用。

使用 mixins 定义钩子函数的步骤如下：

1. 创建一个包含钩子函数和其他选项的 mixins 对象。
2. 在组件中的 mixins 数组中引入 mixins 对象。
3. 当组件的生命周期触发时，mixins 中相应的钩子函数也会被调用。

需要注意的是，如果多个 mixins 对象中的钩子函数有重名的情况，它们会按照 mixins 数组的顺序依次调用。

示例代码如下所示：

// 创建一个 mixins 对象
var myMixin = {
  created: function () {
    console.log('Mixin created');
  },
  mounted: function () {
    console.log('Mixin mounted');
  }
};

// 在组件中引入 mixins 对象
new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('Component created');
  },
  mounted: function () {
    console.log('Component mounted');
  }
});

上述代码中，当创建一个 Vue 实例时，created 和 mounted 钩子函数会按照 mixins 的顺序先后被调用，然后才会调用组件自身的钩子函数。

vue2的Mixins是怎么使用的

Vue2的Mixins可以用来组合多个组件中共用的逻辑，使得代码的复用更加简化，提高了开发效率。使用Mixins的步骤如下：

1. 创建一个包含共用逻辑的Mixin文件。

export const mixin = {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  }
}

2. 在需要使用Mixins的组件中引入并使用Mixin。

import { mixin } from './mixin.js';
export default {
  mixins: [mixin],
  mounted() {
    this.showMessage(); // 输出: "Hello, world!"
  }
}

使用Mixins的时候需要注意以下事项：

• Mixins定义的属性和方法会合并到组件中，冲突的情况下会以组件的优先。

• Mixins可以被多个组件使用，若Mixins被多个组件引用，那么它的数据和方法都会进行混合，组件中使用的时候需要注意。

• 不要在Mixin中修改Vue实例的数据或状态，Mixins的数据和方法可能与组件的数据和方法冲突。

• Mixins中的钩子函数会在组件中的钩子函数之前执行。

vue3的hooks

什么是hooks

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。

其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

如何使用

在 Vue 3 中，你可以使用 Composition API 中的 Hooks 来实现代码复用。下面是一些常见的方法：

1. 自定义 Hooks 函数: 你可以编写自定义的 Hooks 函数，将一些共用的逻辑封装到该函数中，然后在多个组件中引用它。例如，你可以创建一个名为 useValidation 的自定义 Hooks 函数，用于表单验证逻辑的复用。

// useValidation.js
import { ref } from 'vue';

export function useValidation() {
  const error = ref(null);

  function validate(value) {
    if (!value) {
      error.value = 'Field is required';
    } else {
      error.value = null;
    }
  }

  return {
    error,
    validate,
  };
}

然后，在需要进行表单验证的组件中使用这个 Hooks 函数：

import { useValidation } from './useValidation';

export default {
  setup() {
    const { error, validate } = useValidation();

    function onSubmit() {
      // 进行验证
      validate(value);
      
      if (error.value) {
        // 显示错误信息
      } else {
        // 提交表单
      }
    }

    return {
      error,
      onSubmit,
    };
  },
};

2. 公共逻辑提取：使用 Composition API 的 Hooks 将公共逻辑提取出来，并将其作为参数传递给其他 Hooks。这样，多个组件可以共享相同的逻辑。

import { ref, watchEffect } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  watchEffect(() => {
    loading.value = true;

    fetch(url)
      .then(response => response.json())
      .then(result => {
        data.value = result;
        loading.value = false;
      })
      .catch(err => {
        error.value = err;
        loading.value = false;
      });
  });

  return {
    data,
    loading,
    error,
  };
}

然后，在需要获取数据的组件中使用这个 Hooks 函数：

import { useFetchData } from './useFetchData';

export default {
  setup() {
    const { data, loading, error } = useFetchData('https://api.example.com/data');

    return {
      data,
      loading,
      error,
    };
  },
};

通过这种方式，你可以将一些常用的逻辑进行封装，并在多个组件中复用，提高代码的可维护性和复用性。