Mari kita bincangkan tentang maksud Hooks kepada Vue

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Hooks dan vue yang diperkenalkan oleh React dalam versi V16.7.0-alpha Hooks terutamanya memberikan idea yang lebih jelas untuk penggunaan semula corak.

Jangan mengelirukan Hooks dengan cangkuk kitar hayat Vue (Cangkuk Kitar Hayat diperkenalkan oleh React dalam versi V16.7.0-alpha, dan beberapa hari kemudian Vue dikeluarkan). versi bukti konsepnya. Walaupun Hooks diperkenalkan oleh React, ia adalah mekanisme gubahan yang berharga dan penting untuk setiap ekosistem rangka kerja JavaScript, jadi kami akan meluangkan sedikit masa hari ini membincangkan maksud Hooks.

Cangkuk terutamanya memberikan idea yang lebih jelas untuk penggunaan semula corak - mengelak daripada menulis semula komponen itu sendiri dan membenarkan bahagian logik stateful yang berlainan berfungsi bersama dengan lancar.

Soalan Asal

Mengenai React, masalahnya ialah ini: kelas ialah bentuk komponen yang paling biasa apabila ia datang untuk menyatakan konsep keadaan. Komponen berfungsi tanpa kewarganegaraan juga sangat popular, tetapi oleh kerana ia hanya boleh diberikan semata-mata, penggunaannya terhad kepada tugas pembentangan.

Terdapat beberapa masalah dengan kelas itu sendiri. Sebagai contoh, apabila React telah menjadi semakin popular, isu kelas telah menjadi batu penghalang biasa bagi pemula. Untuk memahami React, pembangun juga mesti memahami kelas. Pengikatan menjadikan kod bertele-tele dan kurang boleh dibaca serta memerlukan pemahaman this dalam JavaScript. Beberapa halangan pengoptimuman yang dibentangkan dengan menggunakan kelas juga dibincangkan di sini.

Dari segi penggunaan semula logik, kami biasanya menggunakan corak seperti props render dan komponen tertib lebih tinggi. Tetapi menggunakan corak ini boleh mendapati diri anda berada dalam "piramid azab" yang serupa - neraka pelaksanaan gaya, di mana penggunaan sarang yang berlebihan boleh membawa kepada komponen yang sukar untuk dikekalkan. Ini menyebabkan saya ingin menjerit kepada Dan Abramov seperti dia mabuk, dan tiada siapa yang mahukan itu.

Cangkuk menyelesaikan masalah ini dengan membenarkan kami mentakrif logik stateful untuk komponen menggunakan panggilan fungsi. Panggilan fungsi ini menjadi lebih boleh digubah, boleh digunakan semula dan membolehkan kami mengakses dan mengekalkan keadaan semasa menggunakan komponen berfungsi. Apabila React mengeluarkan Hooks, orang ramai teruja - di bawah anda dapat melihat beberapa kelebihan yang ditunjukkan oleh Hooks dari segi cara ia mengurangkan kod dan pertindihan:

Kesederhanaan adalah kunci dalam penyelenggaraan, dan Hooks menyediakan satu A berfungsi, cara berfungsi untuk mencapai perkongsian logik, dan jumlah kod mungkin lebih kecil.

Mengapa Cangkuk diperlukan dalam Vue?

Selepas membaca ini, anda mesti tertanya-tanya apa yang Hooks tawarkan dalam Vue. Ini kelihatan seperti masalah yang tidak perlu diselesaikan. Lagipun, kelas bukanlah corak utama yang digunakan oleh Vue. Vue menyediakan komponen berfungsi tanpa negara jika anda memerlukannya, tetapi mengapa kita perlu membawa keadaan dalam komponen berfungsi? Kami mempunyai campuran untuk menggabungkan logik yang sama yang boleh digunakan semula merentas berbilang komponen. Masalah selesai.

Saya memikirkan perkara yang sama, tetapi selepas bercakap dengan Evan You, dia menunjukkan kes penggunaan utama yang saya terlepas pandang: mixin tidak boleh menggunakan dan menggunakan keadaan antara satu sama lain, tetapi Hooks boleh. Ini bermakna jika kita perlu merantai logik berkapsul, kita boleh menggunakan Cangkuk.

Cangkuk melaksanakan kefungsian mixin, tetapi elakkan dua masalah utama yang disebabkan oleh mixin:

• Benarkan keadaan dihantar kepada satu sama lain.
• Jelaskan dari mana datangnya logik.

Jika berbilang campuran digunakan, tidak jelas sifat mana yang disediakan oleh campuran mana. Menggunakan Cangkuk, nilai pulangan fungsi merekodkan nilai yang digunakan.

Jadi, bagaimana ini berfungsi dalam Vue? Kami menyebut sebelum ini bahawa apabila menggunakan Hooks, logik dinyatakan dalam panggilan fungsi dan dengan itu boleh digunakan semula. Dalam Vue, ini bermakna kita boleh merangkum panggilan data, panggilan kaedah atau panggilan sifat yang dikira ke dalam fungsi tersuai lain dan menjadikannya boleh digubah secara bebas. Data, kaedah dan sifat yang dikira kini tersedia untuk komponen berfungsi.

Contoh

Mari kita lihat cangkuk yang sangat mudah untuk memahami blok binaan sebelum beralih kepada contoh gubahan dalam Cangkuk.

useWat?

Baiklah, terdapat persilangan antara Vue Hooks dan React Hooks. Ia adalah konvensyen React untuk menggunakan use sebagai awalan, jadi jika anda mencari Hooks dalam React, anda akan mendapati bahawa nama Hooks akan menjadi seperti useState, useEffect, dsb. Maklumat lanjut boleh didapati di sini.

Dalam demo dalam talian Evan, anda boleh melihat tempat dia mengakses useState dan useEffect untuk digunakan dalam fungsi pemaparan.

Jika anda tidak biasa dengan fungsi pemaparan dalam Vue, mungkin berguna untuk melihat dokumentasi tapak web rasmi.

Tetapi apabila kami menggunakan Cangkuk gaya Vue, bagaimana kami menamakannya - anda dapat menekanya - seperti: useData, useComputed, dsb.

Jadi, untuk kita melihat cara menggunakan Hooks dalam Vue, saya mencipta contoh aplikasi untuk kita terokai.

Dalam folder src/hooks, saya mencipta cangkuk yang menghalang penatalan pada cangkuk useMounted dan mendayakan semula penatalan pada cangkuk useDestroyed. Ini membantu saya menjeda penatalan halaman apabila kotak dialog untuk melihat kandungan dibuka dan membenarkan penatalan semula apabila kotak dialog paparan tamat. Ini adalah abstraksi yang baik kerana ia boleh digunakan beberapa kali sepanjang 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;
  });
}

Kemudian kita boleh memanggilnya dalam komponen Vue seperti AppDetails.vue:

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...export default {
  ...  hooks() {
    preventscroll();
  }
}
</script>

Kita boleh menggunakannya bukan sahaja dalam komponen ini tetapi juga sepanjang aplikasi Gunakan fungsi yang sama !

Dua Cangkuk yang memahami antara satu sama lain

Kami menyebut sebelum ini bahawa salah satu perbezaan utama antara Cangkuk dan campuran ialah Cangkuk sebenarnya boleh menghantar nilai antara satu sama lain. Mari kita lihat contoh mudah tetapi agak luar biasa ini.

Dalam aplikasi kami, kami perlu melakukan pengiraan dalam cangkuk boleh guna semula, dan sesuatu yang perlu menggunakan hasil pengiraan itu. Dalam kes kami, kami mempunyai cangkuk yang mengambil lebar tetingkap dan menghantarnya ke animasi supaya ia tahu ia hanya akan menyala apabila kami berada pada skrin yang lebih besar.

Lihat demonstrasi video untuk mendapatkan butiran: css-tricks.com/wp-content/…

Kail pertama:

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
  }
}

Kemudian, dalam cangkuk kedua , kami menggunakannya untuk mencipta keadaan yang mencetuskan logik animasi:

// the data comes from the other hookexport 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
            }
          }
        },
        ...

Kemudian, di dalam komponen, kami menghantar satu cangkuk sebagai parameter kepada cangkuk lain:

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";export default {  hooks() {
    logolettering(windowwidth());
  }
};
</script>

Sekarang Kami boleh menggunakan Hooks untuk menulis logik sepanjang aplikasi! Sekali lagi, ini adalah contoh luar biasa untuk tujuan demonstrasi, tetapi anda boleh melihat bagaimana ini boleh berkesan untuk aplikasi besar, mengekalkan logik dalam fungsi yang lebih kecil dan boleh digunakan semula

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Mari kita bincangkan tentang maksud Hooks kepada Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!