Примечания к чтению | крючки vue3/миксины vue2

Примечания к чтению | крючки vue3/миксины vue2

Прочтите статью: Понимание хуков в Vue3 (зачем использовать хуки)
Автор: Flying Troy
Ссылка: https://juejin.cn/post/7208111879150993464
Источник: Rare Earth Nuggets
Авторские права принадлежат автору. При коммерческой перепечатке просьба обращаться за разрешением к автору, при некоммерческой перепечатке просьба указывать источник.

В серии заметок для чтения будет обновлено абстрактное содержание некоторых статей и некоторые дополнительные сведения для записи и просмотра.
Аннотация исходного текста обычно указывается в тексте, а также обычно указывается дополнительная ссылка для дополнительного понимания или справочных материалов.

миксин

Mix-in — это идея, которую абстрактно можно понимать как компоненты компонентов.

функция миксинов

1. Мультиплексирование логических функций
2. Дополнительные API в компонентах vue (например: данные, вычисления, наблюдение) или перехватчики жизненного цикла компонентов (создаются, монтируются, уничтожаются).

Здесь можно увидеть две особенности
: 1. Разница с компонентами Vue заключается в том, что здесь нет раздела шаблона/представления и предоставляется только функциональная логика многократного использования. => Деконструировать пользовательский интерфейс и логику.
2. Отличие от js-файла, извлекающего логику повторного использования, заключается в том, что можно использовать конфигурацию в компоненте vue.

Использование миксинов

В vue миксин определяет объект, соответствующий дополнительный API компонента vue, помещенного в объект, и соответствующий хук жизненного цикла.

дело

// 定义一个mixin
export const mixins = {
    
    
  data() {
    
    
    return {
    
    
      msg: "我是小猪课堂",
    };
  },
  computed: {
    
    },
  created() {
    
    
    console.log("我是mixin中的created生命周期函数");
  },
  mounted() {
    
    
    console.log("我是mixin中的mounted生命周期函数");
  },
  methods: {
    
    
    clickMe() {
    
    
      console.log("我是mixin中的点击事件");
    },
  },
};
//

// src/App.vue中使用导出的mixin
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import {
    
     mixins } from "./mixin/index";
export default {
    
    
  name: "App",
  mixins: [mixins], // 注册mixin，这样mixin中所有的钩子函数等同于组件中钩子
  components: {
    
    },
  created(){
    
    
    console.log("组件调用minxi数据",this.msg);
  },
  mounted(){
    
    
    console.log("我是组件的mounted生命周期函数")
  }
};
</script>

иллюстрировать

• Функции жизненного цикла в миксине будут объединены и выполнены с функциями жизненного цикла компонентов.
• Данные данных в миксине также можно использовать в компоненте.
• Методы миксина можно вызывать непосредственно внутри компонента.
• Последовательность выполнения после объединения функций жизненного цикла: сначала выполнить примесь, затем выполнить компонент.
• Конфликт одноименных функций, приоритет этого компонента выше, чем у миксина

Преимущества и недостатки

• Преимущества: регистрация повторного использования функций перехвата в компонентах.
• недостаток
  • Конфликты возникнут, если имена функций, зарегистрированные в одном и том же хуке, одинаковы, а имя компонента data, methods, filtersпереопределит одно и то же имя в миксинах data, methods,filters
  • Поиск ошибок требует времени
  • Передается неявно, источник переменной не ясен, она не удобна для чтения, что затрудняет поддержку кода.

крючки

Mixin — это воплощение API опций, а хуки — воплощение API композиции.

хуки = логическая функция + API композиции vue3
миксин = логическая функция + API опций vue2

Пояснение
1. Функция-перехват в vue3 эквивалентна миксину (объекту) vue2, но перехваты — это функции.
2. Функция-перехват в vue3 может помочь нам улучшить возможность повторного использования кода, чтобы мы могли использовать функцию перехватчиков в различных компоненты

import {
    
    ref} from 'vue'
// 导出1个 name_hooks.ts文件
// hooks中不用写在setup中
export const name_hooks = function(value: string) {
    
    
   const name = ref('')
   const setName = (value: string) => {
    
    
       name.value = value
   }
   return {
    
    
      name, setName
   }
}

// 引入hooks文件
<template>
    <div>{
    
    {
    
     name }}</div>
    <select @change="setName"></select> // 这里select组件的change事件会自动传value值
    // 然后value值作为传参传递给setName
</template>
<script setup lang='ts'>
import {
    
     name_hooks } from './name_hooks'
const {
    
     name, setName } = name_hooks() // 注意： 通常需要通过解构赋值将需要的属性方法添加进组件中，解构时需要注意响应式丢失的问题
</script>

На работе я нашел сцену с помощью хуков.
Каждый компонент в основном подразделяется для достижения определенной функции. Например, панель воспроизведения — это компонент. При повторном использовании часто вас волнует не то, как реализована функция, а какие функции имеет компонент (например, воспроизведение, пауза, переход к воспроизведению и т. д.).
Для удобства чтения и обслуживания логический код компонента будет извлечен в один или несколько файлов перехватчиков. Каждая функция объединяет необходимые данные в функциональную форму, а возвращаемым значением функции являются данные, используемые компонентом. Наконец, экспортируйте каждую функцию отдельно.

Спецификация индивидуального крючка

1. Извлечение повторно используемых функций во внешние файлы JS.
2. Имена функций и имена файлов начинаются use, например usePlayBar
, с 3. При ссылке отображайте и деконструируйте необходимые переменные или методы для их предоставления, например.const {play,pause} = usePlayBar()