欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3項目中的hooks的使用教程

 更新時間:2022年08月01日 11:37:01   作者:ed。  
今天我們稍微說一下 vue3 項目中的 hooks 的使用,其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的,學習過 vue2 的小伙伴一定對 mixin 一定比較熟悉,快跟隨小編一起來學習學習吧

今天我們稍微說一下 vue3 項目中的 hooks 的使用,其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的,學習過 vue2 的小伙伴一定對 mixin 一定比較熟悉,就算沒用過也一定了解過,也就是混入,通過 mixin 混入來分發(fā) vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。而 vue2 的 hooks 函數(shù)與 mixin 混入的區(qū)別,主要是 hooks 是函數(shù)。

hooks 特點

vue3 中的 hooks 函數(shù)相當于 vue2 里面的 mixin 混入,不同在于 hooks 是函數(shù)。

vue3 中的 hooks 函數(shù)可以提高代碼的復用性,能夠在不同的組件當中都利用 hooks 函數(shù)。

hooks 函數(shù)可以與 mixin 連用,但是不建議。

hooks 基本使用

首先我們不管 hooks 哈,我們先寫一個小功能,就是獲取頁面的寬高值,這個是講解 hooks 的常用案例了,都是老演員了,我們也來整一個。

我不啰嗦了,直接寫代碼吧。

<template>
  <h3>hooks</h3>

  <p>頁面寬度: {{screen.width}}</p>
  <p>頁面高度: {{screen.height}}</p>

  <el-button @click="getWH">獲取頁面的寬高</el-button>
</template>
<script setup>
  import { reactive } from 'vue'

  const screen = reactive({
    width: 0,
    height: 0
  })

  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

</script>
<style scoped>

</style>

上面的代碼其實很簡單了就,有兩個標簽,顯示可視頁面的長度和寬度,然后有一個按鈕獲取最新的長寬進行顯示。

這個功能是可以順利實現(xiàn)的哈。如果我們需要在另一個頁面也想實現(xiàn)這個功能的話,也很簡單,在直接把上面的代碼復制一下到另一個需要實現(xiàn)的頁面就可以了。

但是

有沒有發(fā)現(xiàn)一個問題,就是一個頁面需要就復制一遍,一個頁面需要就復制一遍,如果有一百個頁面就復制一百遍,代碼一兩行還好,如果是一個超級龐大的工具類,那么在像這樣實現(xiàn)的話,是不是就過于復雜了,而且還不好實現(xiàn),那這個問題怎么解決呢?啊哈哈哈哈,沒錯了寶子們,就是 hooks 。

我們針對上面的案例,我們使用 hooks 簡單的實現(xiàn)一下。

首先,我們在 src 文件夾下創(chuàng)建一個 hooks 文件夾。

在 hooks 文件夾下創(chuàng)建一個文件,名字就叫做 useScreenWh.js 文件

接下來就很簡單了,我們把獲取可視化界面的代碼放進這個 js 文件,然后導出去,給其他頁面使用就可以了。

import { reactive } from 'vue'

export default function () {  // 導出一個默認方法

  // 創(chuàng)建一個對象,保存寬度和高度值
  const screen = reactive({
    width: 0,
    height: 0
  })

  // 創(chuàng)建一個方法,獲取可視化界面的寬度和高度值
  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

  return { screen, getWH }  // 方法返回寬高值
}

然后在需要使用 hooks 的文件引入就可以使用了。

<template>
  <h3>hooks</h3>

  <p>頁面寬度: {{screen.width}}</p>
  <p>頁面高度: {{screen.height}}</p>

  <el-button @click="getWH">獲取頁面的寬高</el-button>

</template>
<script setup lang="ts">

  // 導入 hooks 
  import screenWH from '../hooks/useScreenWh.js'

  // 因為 screenWH 是一個導出的方法,所以需要調(diào)用一下子,然后順便解構(gòu)一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

</script>
<style scoped>

</style>

好了,我們保存看一下效果。

和之前是完全一樣的。

到此這篇關于Vue3項目中的hooks的使用教程的文章就介紹到這了,更多相關Vue3 hooks內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue實現(xiàn)放大鏡效果

    vue實現(xiàn)放大鏡效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • vue在mounted拿不到props中傳遞的數(shù)據(jù)問題

    vue在mounted拿不到props中傳遞的數(shù)據(jù)問題

    這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue中watch監(jiān)聽不到變化的解決

    vue中watch監(jiān)聽不到變化的解決

    本文主要介紹了vue中watch監(jiān)聽不到變化的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-01-01
  • 深入理解Vue-cli搭建項目后的目錄結(jié)構(gòu)探秘

    深入理解Vue-cli搭建項目后的目錄結(jié)構(gòu)探秘

    本篇文章主要介紹了深入理解Vue-cli搭建項目后的目錄結(jié)構(gòu)探秘,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • vue?axios接口請求封裝方式

    vue?axios接口請求封裝方式

    這篇文章主要介紹了vue?axios接口請求封裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue3組件式彈窗打開的3種方式小結(jié)

    vue3組件式彈窗打開的3種方式小結(jié)

    這篇文章主要給大家介紹了關于vue3組件式彈窗打開的3種方式,彈窗組件是常見的交互組件,它能夠彈出一些提示信息、提醒用戶進行操作等等,需要的朋友可以參考下
    2023-07-07
  • vue.js中使用微信掃一掃解決invalid signature問題(完美解決)

    vue.js中使用微信掃一掃解決invalid signature問題(完美解決)

    這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實例代碼給出解決方法,代碼簡單易懂非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • element滾動條組件el-scrollbar的使用詳解

    element滾動條組件el-scrollbar的使用詳解

    本文主要介紹了element滾動條組件el-scrollbar的使用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • Vue中如何進行數(shù)據(jù)響應式更新

    Vue中如何進行數(shù)據(jù)響應式更新

    Vue是一款流行的JavaScript框架,它提供了數(shù)據(jù)響應式更新的能力,可以讓我們輕松地更新數(shù)據(jù),并自動更新視圖,本文將介紹Vue中如何進行數(shù)據(jù)響應式更新,包括使用Vue的響應式系統(tǒng)、使用計算屬性和使用Vue的watcher,需要的朋友可以參考下
    2023-06-06
  • 基于 Vue.js 之 iView UI 框架非工程化實踐記錄(推薦)

    基于 Vue.js 之 iView UI 框架非工程化實踐記錄(推薦)

    為了快速體驗 MVVM 模式,我選擇了非工程化方式來起步,并選擇使用 Vue.js,以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實踐記錄,需要的朋友參考下吧
    2017-11-11

最新評論