<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    VUE3中的HOOKS
  </div>
  <button @click="setNumber">點擊此按鈕，調(diào)用setNumber函數(shù)，數(shù)字會+1：{{myNumber}}</button>
  <button @click="a++">點擊此按鈕，數(shù)字會+1：{{a}}</button>
  <button @click="b--">點擊此按鈕，數(shù)字會-1：{}</button>
</template>
<script>
import { reactive,ref,computed,watch,watchEffect } from "vue";
export default {
  setup(){
    const  myNumber = ref(0)
    const  a = ref(0)
    const  b = ref(0)
    const setNumber = ()=>{
      myNumber.value = myNumber.value+1;
    }
    watch([a,b],([newA,newB],[oldA,oldB])=>{
      console.log('newA,oldA:')
      console.log(newA,oldA)
      console.log('newA,oldB:')
      console.log(newA,oldB)
    })
    return{
      myNumber,
      a,
      b,
      setNumber
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  
}
button{
    display: block;
    margin: 0 auto;
  }
</style>

執(zhí)行代碼看一下：

上面是原始的寫法，如果這里面好幾個變量我們需要復(fù)用怎么辦呢？比如說這幾個變量，函數(shù)，我們需要在其他函數(shù)里也用到，我們要怎么辦呢？？
下面我們就開始采用hook的方法試一把~~
我們創(chuàng)建一個新的文件，src\common-hooks\numberChange.js
把上面的代碼，剪切到src\common-hooks\numberChange.js，然后用這個套起來：export const useNumber =() =>{}

import { ref,watch } from "vue";
export const useNumber =() =>{
    const  myNumber = ref(0)
    const  a = ref(0)
    const  b = ref(0)
    const setNumber = ()=>{
      myNumber.value = myNumber.value+1;
    }
    watch([a,b],([newA,newB],[oldA,oldB])=>{
      console.log('newA,oldA:')
      console.log(newA,oldA)
      console.log('newA,oldB:')
      console.log(newA,oldB)
    })
    return{
      myNumber,
      a,
      b,
      setNumber
    }
}

改寫一下我們的模板代碼里的script：

<script>
import { useNumber } from "./common-hooks/numberChange";
export default {
  setup() {
    const { myNumber, a, b, setNumber } = useNumber();
    return { myNumber, a, b, setNumber };
  },
};
</script>

到此這篇關(guān)于Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解的文章就介紹到這了,更多相關(guān)Vue3 hooks函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: