一、生命周期鉤子

我們前面說過 setup 可以用來替代 data 、 methods 、 computed 、watch 等等這些選項(xiàng)，也可以替代
生命周期鉤子。

那么setup中如何使用生命周期函數(shù)呢？

• 可以使用直接導(dǎo)入的 onX 函數(shù)注冊生命周期鉤子；

二、Provide函數(shù) 和 Inject函數(shù)

事實(shí)上我們之前還學(xué)習(xí)過Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的選項(xiàng)

。

我們可以通過 provide來提供數(shù)據(jù)：
可以通過 provide 方法來定義每個(gè) Property；

provide可以傳入兩個(gè)參數(shù)：

• name：提供的屬性名稱；
• value：提供的屬性值；
  

在 后代組件 中可以通過 inject 來注入需要的屬性和對應(yīng)的值：
可以通過 inject 來注入需要的內(nèi)容；

inject可以傳入兩個(gè)參數(shù)：

• 要 inject 的 property 的 name；
• 默認(rèn)值；
  

三、數(shù)據(jù)的響應(yīng)式

為了增加 provide 值和 inject 值之間的響應(yīng)性，我們可以在 provide 值時(shí)使用 ref 和 reactive。

四、修改響應(yīng)式Property

如果我們需要修改可響應(yīng)的數(shù)據(jù)，那么最好是在數(shù)據(jù)提供的位置來修改：

• 我們可以將修改方法進(jìn)行共享，在后代組件中進(jìn)行調(diào)用；
  

五、封裝Hook函數(shù)案例

計(jì)數(shù)器案例的Hook

修改title的Hook

監(jiān)聽界面滾動位置的Hook

使用 localStorage 存儲和獲取數(shù)據(jù)的Hook

<template><div><h2>當(dāng)前計(jì)數(shù)：{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button><h1>{{data}}</h1><button @click="changeData">修改data</button><p class="content"></p><div class="scroll"><div class="scroll-x">scrollX: {{scrollX}}</div><div class="scroll-y">scrollY: {{scrollY}}</div></div></div> </template> <script> import useTitle from "./hook/useTitle"; import useCounter from "./hook/useCounter"; import useScrollPosition from "./hook/useScrollPosition"; import useLocalStorage from "./hook/useLocalStorage"; export default {name: "Home",setup(props, context) {// 1. 計(jì)數(shù)器const {counter, increment, decrement} = useCounter()// 2. 修改titleconst titleRef = useTitle('我是默認(rèn)的title')setTimeout(() => {titleRef.value = 'hahaha'}, 4000)// 3. 獲取滾動位置const {scrollX, scrollY} = useScrollPosition()// 4.保存數(shù)據(jù)const data = useLocalStorage('user', {name: 'zep', age: 22})const changeData = () => {data.value = {name: 'haha', age: 18}}return {counter, increment, decrement,scrollX, scrollY,data, changeData}} } </script><style scoped>.content {width: 3000px;height: 5000px;}.scroll {position: fixed;right: 30px;bottom: 30px;} </style>

六、補(bǔ)充：setup頂層編寫方式（實(shí)驗(yàn)性特性，不穩(wěn)定）

總結(jié)

以上是生活随笔為你收集整理的Vue3 Composition API（三）——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。