vue3之setup的使用理解

1、vue3中的setup有什麼用?

setup的設計是為了使用組合式api

2、為什麼不用之前的元件的選項

data、computed、methods、watch 組織邏輯在大多數情況下都有效。然而，當我們的元件變得更大時，邏輯關注點的列表也會增長。這可能會導致元件難以閱讀和理解，尤其是對於那些一開始就沒有編寫這些元件的人來說。而通過setup可以將該部分抽離成函式,讓其他開發者就不用關心該部分邏輯了.

3、setup的在vue生命週期的位置

setup位於created 和beforecreated之前,用於代替created 和beforecreated,但是在setup函式裡不能訪問到this,另外setup內可以通過以下hook操作整個生命週期

onbeforemount,onmounted,onbeforeupdate,onupdated,onbeforeunmount,onunmounted,onerrorcaptured,onrendertracked,onrendertriggered

4、setup可以接收哪些引數?

setup可接受props,context,其中props由於是響應式資料,不能直接解構賦值,context不是響應式資料,可以直接解構賦值;setup必須返回乙個物件,一旦return,就可以像vue2.x的方式使用該屬性

props:['test']
setup(props,context) = props //錯
const = torefs(props) //對
const = context //對
return 
}

5、優先順序,如果data,props,setup都有乙個同名屬性,setup返回的該屬性優先順序最高,以執行以下**為例,將顯示:test from son's setup


...setup()
}...
優先順序測試

6、如上**所示,若要在setup內執行ref,torefs,toref,computed,watch,watcheffect等函式,需先引入

import  from "vue";

7、如何在setup中拿到ref對應的子元件,並執行其的函式,場景如下:使用antd的form表單的驗證,在vue2.x方案時可以在methods中通過this時需要使用this.$refs.ruleform.validate(),而在setup中拿不到this,應該從入手,看下面**

//...
重置//...vue2.x
methods: )
.catch(error => );
},resetform() ,
},//..vue3
setup(),vue3會自動繫結ref="ruleform"的元件
//設定方法,但是要通過ruleform.value才能拿到元件
const onsubmit=()=>)
.catch((error) => );
} const resetform = () => ;
必須返回乙個物件,把vue在生命週期需要呼叫的方法,屬性暴露出去
return 
}

8、如何呼叫子元件內setup內的方法?

子元件在setup寫好方法method,並通過return暴露出去

父元件呼叫子元件時為其新增ref屬性

父元件setup內拿到子元件新增的ref屬性property,再通過property.value.method()呼叫

子元件

// 渲染從父級接受到的值 son: }

父元件

sonref send // 這裡ref接受的字串，要setup返回的ref型別的變數同名

9、vue3如何setup函式如何實現多屬性監聽,如何實現深度監聽?

引入watch,watch最後返回unwatch方法,在呼叫該方法將停止監聽

watch傳入陣列,注意,監聽的是普通型別可直接輸入,若是引用型別,則需要輸入函式返回的值,例如要想同時監聽data.form.c.c1屬性和ddd屬性

對於watch第三個傳參deep和immediate都不陌生,而flush的作用是決定callback的執行時機,有三個選項,pre(預設),post,sync,分別對應watch在元件更新前,後,時執行callback.

const ddd = ref("wwww");
const data = reactive(,
},haha: "haha",
});const unwatch = watch(
[ddd, () => data.form.c.c1],//傳入陣列
(newvalue, oldvalue) => 
console.log(`new--->$`);
console.log(`old--->$`);
console.log(newvalue[0]);
console.log(newvalue);
},//第三個引數傳入deep,immediate,flush屬性
); settimeout(() => , 1000);
settimeout(() => );
}, 2000);
settimeout(() => , 3000);

10、vue3的watcheffect有什麼用?

它是乙個與偵聽器,作用和watch差不多,但是不能拿到newvalue和oldvalue,下面是它的定義,傳參effect函式和option物件,effect函式又可傳入oninvalidate函式,option物件可傳入flush,ontrack,ontrigger,flush與watch的flush相同,ontrack,ontrigger又可傳入debuggerevent 函式用於開發除錯,返回與watch相同返回乙個停止偵聽的函式

function watcheffect(
effect: (oninvalidate: invalidatecbregistrator) => void,
options?: watcheffectoptions
): stophandle;
inte***ce watcheffectoptions 
inte***ce debuggerevent 
type invalidatecbregistrator = (invalidate: () => void) => void;
type stophandle = () => void;

傳參的effect函式會在元件beforecreate之前就執行一次,若該函式裡使用到了某些資料,將監聽該資料,當監聽的資料發生變化時就會(若watcheffect傳入了oninvalidate函式,則會先執行oninvalidate函式後)再次執行effect函式.

}}
jump

oninvalidate函式的執行時機

(1). effect裡的值改變時,會先於內部函式執行

(2). 偵聽器被停止(元件unmounted也會關閉偵聽器)

vue3之setup的使用理解

Vue3使用總結

VUE3裡面 setup 的常用方法一覽

Vue3 學習筆記之 watchEffect

vue3之setup的使用理解

Vue3使用總結

VUE3裡面 setup 的常用方法一覽

Vue3 學習筆記之 watchEffect

相關推薦