一、生命周期鉤子

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

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

• 可以使用直接導入的 onX 函數注冊生命周期鉤子；

二、Provide函數 和 Inject函數

事實上我們之前還學習過Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的選項

。

我們可以通過 provide來提供數據：
可以通過 provide 方法來定義每個 Property；

provide可以傳入兩個參數：

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

在 后代組件 中可以通過 inject 來注入需要的屬性和對應的值：
可以通過 inject 來注入需要的內容；

inject可以傳入兩個參數：

• 要 inject 的 property 的 name；
• 默認值；
  

三、數據的響應式

為了增加 provide 值和 inject 值之間的響應性，我們可以在 provide 值時使用 ref 和 reactive。

四、修改響應式Property

如果我們需要修改可響應的數據，那么最好是在數據提供的位置來修改：

• 我們可以將修改方法進行共享，在后代組件中進行調用；
  

五、封裝Hook函數案例

計數器案例的Hook

修改title的Hook

監聽界面滾動位置的Hook

使用 localStorage 存儲和獲取數據的Hook

<template><div><h2>當前計數：{{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. 計數器const {counter, increment, decrement} = useCounter()// 2. 修改titleconst titleRef = useTitle('我是默認的title')setTimeout(() => {titleRef.value = 'hahaha'}, 4000)// 3. 獲取滾動位置const {scrollX, scrollY} = useScrollPosition()// 4.保存數據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>

六、補充：setup頂層編寫方式（實驗性特性，不穩定）

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。