Ketahui lebih lanjut tentang Hooks dalam Vue dan bercakap tentang kepentingannya kepada Vue!

Apakah maksud Hooks untuk Vue? Artikel ini akan membawa anda memahami Hooks dalam Vue dan bercakap tentang kepentingannya untuk Vue. Saya harap ia akan membantu semua orang.

Cangkuk yang akan kita bincangkan dalam artikel ini berbeza daripada Cangkuk Kitar Hidup (cangkuk kitaran hayat), yang diperkenalkan ke dalam React dalam v16 .7.0-alpha ;Walaupun Hooks dicadangkan oleh React, intipatinya ialah mekanisme gabungan kod yang penting, yang memberi manfaat besar kepada keseluruhan sistem rangka kerja JavaScript; luangkan masa untuk membincangkannya secara terperinci hari ini: Apa itu Hooks maksudkan ke Vue?

Cangkuk menyediakan cara yang lebih jelas untuk menyusun kod, menjadikan kod boleh diguna semula dan yang lebih penting, membenarkan bahagian logik yang berbeza untuk berkomunikasi dan berfungsi bersama. [Cadangan berkaitan: tutorial video vue.js]

Latar belakang masalah

Mengapa Cangkuk dinaikkan? Setakat React, latar belakang asal masalah ini ialah:

Apabila ia datang untuk menyatakan konsep keadaan, kelas ialah bentuk organisasi yang paling biasa. Kelas itu sendiri mempunyai beberapa masalah, seperti hubungan mengikat yang panjang dan rumit, menjadikannya sukar untuk dibaca, dan arah Ini sentiasa membuat orang keliru

Bukan itu sahaja, dari segi penggunaan semula, gunakan alat rendering atau komponen tertib tinggi Corak kelas adalah sangat biasa, tetapi mudah untuk jatuh ke dalam "piramid azab" (Pyramid of Doom), yang boleh difahami sebagai hubungan bersarang yang berlebihan; > Cangkuk di sini untuk menyelesaikan masalah ini ; Cangkuk membenarkan kami menggunakan panggilan fungsi untuk mentakrifkan logik keadaan komponen Fungsi ini lebih boleh digubah dan boleh digunakan semula pada masa yang sama, capaian keadaan dan penyelenggaraan masih boleh dilakukan;

Contoh:

Kod @dan_abramov daripada #ReactConf2018

Gambar①

• Gambar①

Terdapat perubahan daripada Rajah ① kepada Rajah ②, kod komponen digabungkan semula, dan kemudian dieksport sebagai fungsi untuk kegunaan semula luaran; terma penyelenggaraan, Hooks Menyediakan cara tunggal yang berfungsi untuk mengendalikan logik bersama yang berpotensi untuk mengurangkan saiz kod.

Cangkuk Vue

Jadi mengapa Cangkuk digunakan dalam Vue? Lagipun, tiada kelas yang kerap digunakan dalam Vue; dalam Vue kami menggunakan mixin untuk menyelesaikan logik penggunaan semula komponen yang sama

• Apakah masalah dengan mixin? Bolehkah Hooks menyelesaikannya?

Terdapat dua masalah utama:
Keadaan tidak boleh dipindahkan antara mixin

Tiada penjelasan yang jelas tentang sumber logik ;

Cangkuk boleh menyelesaikan dua perkara ini dengan baik; >

Cangkuk1

import { useData, useMounted } from 'vue-hooks';

export function windowwidth() {
  const data = useData({
    width: 0
  })

  useMounted(() => {
    data.width = window.innerWidth
  })

  // this is something we can consume with the other hook
  return {
    data
  }
}

Cangkuk2

// the data comes from the other hook
export function logolettering(data) {
  useMounted(function () {
    // this is the width that we stored in data from the previous hook
    if (data.data.width > 1200) {
      // we can use refs if they are called in the useMounted hook
      const logoname = this.$refs.logoname;
      Splitting({ target: logoname, by: "chars" });

      TweenMax.staggerFromTo(".char", 5,
        {
          opacity: 0,
          transformOrigin: "50% 50% -30px",
          cycle: {
            color: ["red", "purple", "teal"],
            rotationY(i) {
              return i * 50
            }
          }
        },
        ...

Nilai lulus antara dua cangkuk:

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";

export default {
  hooks() {
    logolettering(windowwidth());
  }
};
</script>

Kita boleh Gunakan Logik gabungan cangkuk di seluruh aplikasi;

Kosongkan sumber

Dalam folder src/hooks, Cangkuk dicipta untuk melaksanakan: Buka kotak dialog Menjeda halaman semasa melihat kandungan , dan membenarkan penatalan semula selepas melihat kotak dialog.

Ia berkemungkinan akan digunakan beberapa kali dalam aplikasi;

import { useDestroyed, useMounted } from "vue-hooks";

export function preventscroll() {
  const preventDefault = (e) => {
    e = e || window.event;
    if (e.preventDefault)
      e.preventDefault();
    e.returnValue = false;
  }

  // keycodes for left, up, right, down
  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  const preventDefaultForScrollKeys = (e) => {
    if (keys[e.keyCode]) {
      preventDefault(e);
      return false;
    }
  }

  useMounted(() => {
    if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.touchmove = preventDefault; // mobile
    window.touchstart = preventDefault; // mobile
    document.onkeydown = preventDefaultForScrollKeys;
  });

  useDestroyed(() => {
    if (window.removeEventListener)
      window.removeEventListener('DOMMouseScroll', preventDefault, false);

    //firefox
    window.addEventListener('DOMMouseScroll', (e) => {
      e.stopPropagation();
    }, true);

    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.touchmove = null;
    window.touchstart = null;
    document.onkeydown = null;
  });
}

Panggilnya dalam komponen AppDetails.vue:

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...

export default {
  ...
  hooks() {
    preventscroll();
  }
}
</script>

Ringkasan

Ringkasan asal

Vue Hooks sudah boleh digunakan dengan Vue 2.x, tetapi masih dalam peringkat percubaan. Kami merancang untuk menyepadukan Hooks ke dalam Vue 3, tetapi ia akan tetap berbeza daripada React Hooks;

Ringkasan artikel ini

Hooks telah digunakan pada Vue3 , iaitu, perkara persediaan, tetapi ia mempunyai beberapa perbezaan daripada React's Hooks, adalah disyorkan untuk membaca Apakah kelebihan Vue3? (Perbandingan terperinci dengan React Hook)

Alamat https://zhuanlan.zhihu.com/p/133819602

Malah, saya faham niat reka bentuknya, walaupun tidak original Dengan memanggil rangka kerja dan menggunakan JS secara asli, anda boleh mencipta logik guna semula yang serupa. Merangkumkan logik untuk melaksanakan fungsi lengkap ke dalam fungsi Lihat sahaja pada nama fungsi dan anda tidak perlu mengetahui pelaksanaan dalamannya Sekurang-kurangnya ini secara umumnya, idea reka bentuk adalah konsisten dengan pengaturcaraan berfungsi

Isi utama artikel ini diterjemahkan daripada: what-hooks-mean-for-vue (https ://css-tricks.com/what -hooks-mean-for-vue/)

Pengarang: Sarah Drasner

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang Hooks dalam Vue dan bercakap tentang kepentingannya kepada Vue!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!