1、計算屬性和監視

（1）計算屬性

【computed函數】計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter。

計算屬性的 getter 函數沒有副作用，它更易于測試和理解。

//第一個姓名 只有getter的計算屬性const fullName1 = computed(() => {return user.firstName + "_" + user.lastName;});// 第二個姓名 有getter與setter的計算屬性getter和setterconst fullName2 = computed({get() {console.log("get方法===");return user.firstName + "_" + user.lastName;},set(val: string) {console.log("set方法===", val);const name = val.split("_");user.firstName = name[0];user.lastName = name[1];},});

計算屬性和methods方法的區別：

計算屬性是基于它們的反應依賴關系緩存的。計算屬性只在相關響應式依賴發生改變時它們才會重新求值。相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。

（2）監視

【watch函數】監視指定的一個或多個響應式數據, 一旦數據變化, 就自動執行監視回調，默認初始時不執行回調, 但可以通過配置immediate為true, 來指定初始時立即執行第一次。通過配置deep為true, 來指定深度監視。

// 第三個姓名const fullName3 = ref("");// 監視指定的數據watch(user,({ firstName, lastName }) => {fullName3.value = firstName + "_" + lastName;},{ immediate: true, deep: true } //immediate默認執行一次watch，deep深度監視);

【watchEffect函數】不用直接指定要監視的數據, 回調函數中使用的哪些響應式數據就監視哪些響應式數據。默認初始時就會執行第一次, 從而可以收集需要監視的數據。監視數據發生變化時回調。

//?監視，不需要配置immediate,本身默認就會進行監視（默認執行一次） watchEffect(()?=>?{fullName3.value?=?user.firstName?+?"_"?+?user.lastName; });

例子

<template><h2>計算屬性和監視</h2><fieldset><legend>姓名操作</legend>姓氏：<input v-model="user.firstName" type="text" placeholder="請輸入姓氏" /><br />名字：<inputv-model="user.lastName"type="text"placeholder="請輸入名字"/><br /></fieldset><fieldset><legend>計算屬性和監視的演示</legend>姓名：<input v-model="fullName1" type="text" placeholder="顯示姓名" /><br />姓名：<input v-model="fullName2" type="text" placeholder="顯示姓名" /><br />姓名：<input v-model="fullName3" type="text" placeholder="顯示姓名" /><br /></fieldset> </template> <script lang="ts"> import {defineComponent,ref,reactive,computed,watch,watchEffect, } from "vue"; export default defineComponent({name: "App",setup() {const user = reactive({firstName: "雷",lastName: "朗朗",});//第一個姓名 只有getter的計算屬性const fullName1 = computed(() => {return user.firstName + "_" + user.lastName;});// 第二個姓名 有getter與setter的計算屬性getter和setterconst fullName2 = computed({get() {console.log("get方法===");return user.firstName + "_" + user.lastName;},set(val: string) {console.log("set方法===", val);const name = val.split("_");user.firstName = name[0];user.lastName = name[1];},});// 第三個姓名const fullName3 = ref("");// 監視指定的數據watch(user,({ firstName, lastName }) => {fullName3.value = firstName + "_" + lastName;},{ immediate: true, deep: true } //immediate默認執行一次watch，deep深度監視);// 監視，不需要配置immediate,本身默認就會進行監視（默認執行一次）// watchEffect(() => {// fullName3.value = user.firstName + "_" + user.lastName;// });// 監視fullName3數據，改變firstName和lastNamewatchEffect(() => {const name = fullName3.value.split("_");user.firstName = name[0];user.lastName = name[1];});// watch---可以監視多個數據，監視非響應式的數據，采用回調函數的形式才可以watch([() => user.firstName, user.lastName, fullName3], () => {console.log("===執行數據監視===");});return {user,fullName1,fullName2,fullName3,};}, }); </script>

2、生命周期

vue2對應的鉤子函數，vue3的鉤子函數先執行，比如說?onMounted在mounted?前執行。

說明	vue2鉤子函數	vue3中對應的組合式API
組件實例化之前執行	beforeCreate	使用?setup()
組件實例化完畢，但頁面還未顯示	created	使用?setup()
組件掛載前，頁面仍未顯示，但虛擬Dom已經配置	beforeMount	onBeforeMount
組件掛載后，此方法執行后，頁面顯示	mounted?	onMounted
組件更新前，頁面仍未更新，但虛擬Dom已經配置	beforeUpdate	onBeforeUpdate
組件更新，此方法執行后，頁面顯示	updated	onUpdated
組件銷毀前	beforeDestroy	onBeforeUnmount
組件銷毀	destroyed	onUnmounted
錯誤處理機制	errorCaptured	onErrorCaptured

組合式 API 還提供了onRenderTracked、onRenderTriggered調試鉤子函數。

【App.vue】

<template><h2>APP父組件</h2><button?@click="showChild">是否顯示child</button><hr?/><child?v-if="isShow"></child> </template> <script?lang="ts">import?{?defineComponent,?ref,?reactive?}?from?"vue";import?Child?from?"./components/Child.vue";export?default?defineComponent({name:?"App",components:?{Child,},setup()?{const?isShow?=?ref(false);const?showChild?=?()?=>?{console.log("=====",?isShow.value);isShow.value?=?!isShow.value;};return?{isShow,showChild,};}, }); </script>

【Child.vue】

<template><h2>Child子組件</h2><div>msg:{{ msg }}</div><button @click="update">更新數據</button> </template> <script lang="ts"> import {defineComponent,ref,onBeforeMount,onMounted,onUnmounted,onUpdated,onBeforeUnmount,onBeforeUpdate, } from "vue"; export default defineComponent({name: "Child",// vue2.x中的生命周期鉤子ebeforeCreate() {console.log("vue2.x中的beforeCreate");},created() {console.log("vue2.x中的created");},beforeMount() {console.log("vue2.x中的beforeMount");},mounted() {console.log("vue2.x中的mounted");},beforeUpdate() {console.log("vue2.x中的beforeUpdate");},updated() {console.log("vue2.x中的updated");},// vue2.x的beforeDestroy和destroyed這兩個生命周期回調已經在vue3中改名了，所以不不能再用了// beforeDestroy() {// console.log("vue2.x中的beforeDestroy");// },// destroyed() {// console.log("vue2.x中的destroyed");// },beforeUnmount() {console.log("vue2.x中的beforeUnmount");},unmounted() {console.log("vue2.x中的unmounted");},setup() {console.log("vue3.0中的setup");const msg = ref("你好");const update = () => {msg.value += "==";};onBeforeMount(() => {console.log("vue3.0中的onBeforeMount");});onMounted(() => {console.log("vue3.0中的onMounted");});onBeforeUpdate(() => {console.log("vue3.0中的onBeforeUpdate");});onUpdated(() => {console.log("vue3.0中的onUpdated");});onBeforeUnmount(() => {console.log("vue3.0中的onBeforeUnmount");});onUnmounted(() => {console.log("vue3.0中的onUnmounted");});return {msg,update,};}, }); </script>

3、自定義hook函數

使用Vue3的組合API封裝的可復用的功能函數

自定義hook的作用類似于vue2中的mixin技術

自定義Hook的優勢: 很清楚復用功能代碼的來源, 更清楚易

例子：自定義獲取當前鼠標點擊的坐標的自定義hook函數。

【useMousePosition.ts】位于src->hook文件夾下

例子：封裝發ajax請求的hook函數

【products.json】位于public->data文件夾下。

【products.json】

[{"id":1,"title":"蘋果","price":4},{"id":2, "title":"哈密瓜","price":8},{"id":3,"title":"榴蓮","price":12} ]

4、toRefs

把一個響應式對象轉換成普通對象，該普通對象的每個 property 都是一個 ref。

將響應式對象中所有屬性包裝為ref對象, 并返回包含這些ref對象的普通對象

應用: 當從合成函數返回響應式對象時，toRefs 非常有用，這樣消費組件就可以在不丟失響應式的情況下對返回的對象進行分解使用。

<template><div>name:{{ name }}</div><div>age:{{ age }}</div><div>name:{{ name2 }}</div><div>age:{{ age2 }}</div> </template> <script lang="ts"> import { defineComponent, ref, reactive, toRefs } from "vue"; function useFeatureX() {const state = reactive({name2: "雷朗朗",age2: 2,});return {...toRefs(state),}; } export default defineComponent({name: "App",setup() {const a = ref("哈哈");console.log("a==", a);const state = reactive({name: "雷朗朗",age: 2,});console.log("state==", state);const state2 = toRefs(state); // toRefs可以把一個響應式對象轉換成普通對象，該普通對象的每個property都是一個refconsole.log("state2==", state2);const { name2, age2 } = useFeatureX();// setInterval(() => {// name.value += "==";// console.log("==定時器執行==");// }, 1000);return {...state2,name2,age2,};}, }); </script>

?

總結

以上是生活随笔為你收集整理的vue3+Typescript---Composition API(常用部分)学习笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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