- vue3中的setup有什么用?
setup的設(shè)計(jì)是為了使用組合式api - 為什么不用之前的組件的選項(xiàng)
data、computed、methods、watch 組織邏輯在大多數(shù)情況下都有效。然而，當(dāng)我們的組件變得更大時(shí)，邏輯關(guān)注點(diǎn)的列表也會(huì)增長(zhǎng)。這可能會(huì)導(dǎo)致組件難以閱讀和理解，尤其是對(duì)于那些一開(kāi)始就沒(méi)有編寫(xiě)這些組件的人來(lái)說(shuō)。而通過(guò)setup可以將該部分抽離成函數(shù),讓其他開(kāi)發(fā)者就不用關(guān)心該部分邏輯了. - setup的在vue生命周期的位置
setup位于created 和beforeCreated只前,用于代替created 和beforeCreated,但是在setup函數(shù)里不能訪問(wèn)到this,另外setup內(nèi)可以通過(guò)以下hook操作整個(gè)生命周期
onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered - setup可以接收哪些參數(shù)?
setup可接受props,context,其中props由于是響應(yīng)式數(shù)據(jù),不能直接解構(gòu)賦值,context不是響應(yīng)式數(shù)據(jù),可以直接解構(gòu)賦值;setup必須返回一個(gè)對(duì)象,一旦return,就可以像vue2.x的方式使用該屬性
props:['test']
setup(props,context){
//const {test} = props //錯(cuò)
const {test} = toRefs(props) //對(duì)
const { attrs, slots, emit }= context //對(duì)
return {
test
}
}
- 優(yōu)先級(jí),如果data,props,setup都有一個(gè)同名屬性,setup返回的該屬性優(yōu)先級(jí)最高,以執(zhí)行以下代碼為例,將顯示:
test from son's setup
//father.vue
...
<custField :test="test" />
setup(){
const test = ref('test from father')
return{
test
}
}
...
//son.vue
<template>
<div class="custField">
優(yōu)先級(jí)測(cè)試
<h1>{{ test }}</h1>
</div>
</template>
<script>
import { toRefs } from "vue";
export default {
props: ["test"],
data() {
return {
test: "test from son's data",
};
},
setup(props) {
let test = toRefs(props);
test = "test from son's setup";
return { test };
},
};
</script>
執(zhí)行結(jié)果如下
結(jié)果
- 如上代碼所示,若要在setup內(nèi)執(zhí)行ref,toRefs,toRef,computed,watch,watchEffect等函數(shù),需要通過(guò)import的方式從vue中引入后才能使用,eg:
import { toRefs, ref, onMounted, nextTick } from "vue"; - 如何在setup中拿到ref對(duì)應(yīng)的子組件,并執(zhí)行其的函數(shù),場(chǎng)景如下:使用antd的form表單的驗(yàn)證,在vue2.x方案時(shí)可以在methods中通過(guò)this時(shí)需要使用
this.$refs.ruleForm.validate(),而在setup中拿不到this,應(yīng)該從{ref}入手,看下面代碼
//...
<a-form
ref="ruleForm"
:model="form"
:rules="rules"
>
<a-form-item ref="name" label="Activity name" name="name">
<a-input v-model:value="form.name" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit"> 驗(yàn)證</a-button>
<a-button style="margin-left: 10px" @click="resetForm"> 重置</a-button>
</a-form-item>
</a-form>
//...vue2.x
methods: {
onSubmit() {
this.$refs.ruleForm
.validate()
.then(() => {
console.log('values', this.form);
})
.catch(error => {
console.log('error', error);
});
},
resetForm() {
this.$refs.ruleForm.resetFields();
},
},
//..vue3
setup(){
//1.設(shè)置一個(gè) <a-form
// ref="ruleForm"
// :model="form"
// :rules="rules"
//> ref同名屬性,并使用ref(null)包裝
const ruleForm=ref(null)//通過(guò)ref或reactive包裹起來(lái)讓其成為響應(yīng)式數(shù)據(jù)
//2.一旦后面return {ruleForm},vue3會(huì)自動(dòng)綁定ref="ruleForm"的組件
//設(shè)定方法,但是要通過(guò)ruleForm.value才能拿到組件
const onSubmit=()=>{
ruleForm.value//通過(guò)ref包裹的數(shù)據(jù)需要使用.value來(lái)取得相應(yīng)的值
.validate()//,而reactive包裹的數(shù)據(jù)不需要通過(guò).value來(lái)取得相應(yīng)的值
.then(() => {
console.log("values", form);
})
.catch((error) => {
console.log("error", error);
});
}
const resetForm = () => {
console.log("resetForm");
ruleForm.value.resetFields();
};
//3.setup必須返回一個(gè)對(duì)象,把vue在生命周期需要調(diào)用的方法,屬性暴露出去
return {
ruleForm,//Q:為什么上面要用.value的形式,A:這里會(huì)自動(dòng)解綁
onSubmit,
resetForm
}
}
- 目前"ant-design-vue": "^2.0.0-rc.8",與"vue": "^3.0.0",在使用a-form里的submit事件時(shí),若需要校驗(yàn),會(huì)使得校驗(yàn)無(wú)論如何都不能走then,只能走catch,需要將a-form的submit事件改為按鈕執(zhí)行方法
//以下代碼上述版本會(huì)導(dǎo)致點(diǎn)擊提交表單時(shí)數(shù)據(jù)驗(yàn)證通不過(guò)
<a-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
@submit='onSubmit'
>
//....
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" html-type='submit'> Create </a-button>
</a-form-item>
</a-form>
//...
setup(){
const ruleFormRef = ref(null)
const onSubmit= () => {
ruleFormRef.value
.validate()
.then(() => {
console.log('sucess') //上述版本無(wú)論如何都不會(huì)執(zhí)行then,只會(huì)走catch
})
.catch((error) => {
console.log("error", error);
});
}
return{
onSubmit
}
}
- 截止2021/1/14,最新版vite與最新版antd有沖突,得改成vuecli;
沖突版本:vite"vite": "^1.0.0-rc.1"與"ant-design-vue": "^2.0.0-rc.8", - 如何調(diào)用子組件內(nèi)setup內(nèi)的方法?
i. 子組件在setup寫(xiě)好方法method,并通過(guò)return暴露出去
ii. 父組件調(diào)用子組件時(shí)為其添加ref屬性
iii. 父組件setup內(nèi)拿到ii添加的ref屬性property,再通過(guò)property.value.method()調(diào)用
子組件
<template>
// 渲染從父級(jí)接受到的值
<div>Son: {{ valueRef }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'Son',
setup() {
const valueRef = ref('')
// 該函數(shù)可以接受父級(jí)傳遞一個(gè)參數(shù)，并修改valueRef的值
const acceptValue = (value: string) => (valueRef.value = value)
return {
acceptValue,
valueRef
}
}
})
</script>
父組件
<template>
<div>sonRef</div>
<button @click="sendValue">send</button>
// 這里ref接受的字符串，要setup返回的ref類型的變量同名
<Son ref="sonRef" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Son from '@/components/Son.vue'
export default defineComponent({
name: 'Demo',
components: {
Son
},
setup() {
// 如果ref初始值是一個(gè)空，可以用于接受一個(gè)實(shí)例
// vue3中獲取實(shí)例的方式和vue2略有不同
const sonRef = ref()
const sendValue = () => {
// 可以拿到son組件實(shí)例，并調(diào)用其setup返回的所有信息
console.log(sonRef.value)
// 通過(guò)調(diào)用son組件實(shí)例的方法，向其傳遞數(shù)據(jù)
sonRef.value.acceptValue('123456')
}
return {
sonRef,
sendValue
}
}
})
</script>
-
defineComponent是便于typescript推斷類型的組件構(gòu)造函數(shù),可以傳入name,data,setup,methods等參數(shù),如果只有setup,則可以直接傳入setup方法;但是注意:若要在setup中使用props屬性,props為必輸,所以方法二訪問(wèn)不到props屬性
//方法一,傳入其他屬性
export default defineComponent({
name:'xxx',
props:['aaa']//若要在setup中使用props,必輸props
setup(props,context){
const aaa = ref(aaa)
return {aaa}
}
})
//方法二,直接傳入setup函數(shù)
export default defineComponent((props,context)=>{
//...你的代碼 ,但是注意這里props拿不到實(shí)際數(shù)據(jù)
})
- vue3如何setup函數(shù)如何實(shí)現(xiàn)多屬性監(jiān)聽(tīng),如何實(shí)現(xiàn)深度監(jiān)聽(tīng)?
i. 引入watch,watch最后返回unwatch方法,在調(diào)用該方法將停止監(jiān)聽(tīng)
ii. watch傳入數(shù)組,注意,監(jiān)聽(tīng)的是普通類型可直接輸入,若是引用類型,則需要輸入函數(shù)返回的值,例如要想同時(shí)監(jiān)聽(tīng)data.form.c.c1屬性和ddd屬性
iii. 對(duì)于watch第三個(gè)傳參deep和immediate都不陌生,而flush的作用是決定callback的執(zhí)行時(shí)機(jī),有三個(gè)選項(xiàng),pre(默認(rèn)),post,sync,分別對(duì)應(yīng)watch在組件更新前,后,時(shí)執(zhí)行callback.
const ddd = ref("wwww");
const data = reactive({
form: {
a: 1,
b: 2,
c: {
c1: "c1",
c2: "c2",
},
},
haha: "haha",
});
const unwatch = watch(
[ddd, () => data.form.c.c1],//傳入數(shù)組
(newValue, oldValue) => {//結(jié)構(gòu)的也是數(shù)組,
//也可以寫(xiě)成([nowddd,nowC1],[preddd,preC1])=>{...}
console.log(`new--->${newValue}`);
console.log(`old--->${oldValue}`);
console.log(newValue[0]);
console.log(newValue);
},
{ deep: true }//第三個(gè)參數(shù)傳入deep,immediate,flush屬性
);
setTimeout(() => {
ddd.value = "eee";
}, 1000);
setTimeout(() => {
data.form.c.c1 = "2222";
setTimeout(() => {
unwatch();//這里異步使用unwatch方法,后面的ddd.value = "ffff"將不被監(jiān)聽(tīng)
});
}, 2000);
setTimeout(() => {
ddd.value = "ffff";
}, 3000);
- vue3的watchEffect有什么用?
i. 它是一個(gè)與偵聽(tīng)器,作用和watch差不多,但是不能拿到newValue和oldValue,下面是它的定義,傳參effect函數(shù)和option對(duì)象,effect函數(shù)又可傳入onInvalidate函數(shù),option對(duì)象可傳入flush,onTrack,onTrigger,flush與watch的flush相同,onTrack,onTrigger又可傳入DebuggerEvent 函數(shù)用于開(kāi)發(fā)調(diào)試,返回與watch相同返回一個(gè)停止偵聽(tīng)的函數(shù)
function watchEffect(
effect: (onInvalidate: InvalidateCbRegistrator) => void,
options?: WatchEffectOptions
): StopHandle;
interface WatchEffectOptions {
flush?: "pre" | "post" | "sync";
onTrack?: (event: DebuggerEvent) => void;
onTrigger?: (event: DebuggerEvent) => void;
}
interface DebuggerEvent {
effect: ReactiveEffect;
target: any;
type: OperationTypes;
key: string | symbol | undefined;
}
type InvalidateCbRegistrator = (invalidate: () => void) => void;
type StopHandle = () => void;
ii. 傳參的effect函數(shù)會(huì)在組件beforeCreate之前就執(zhí)行一次,若該函數(shù)里使用到了某些數(shù)據(jù),將監(jiān)聽(tīng)該數(shù)據(jù),當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)發(fā)生變化時(shí)就會(huì)(若watchEffect傳入了onInvalidate函數(shù),則會(huì)先執(zhí)行onInvalidate函數(shù)后)再次執(zhí)行effect函數(shù).
<template>
<div class="about">
<h1>This is an about page</h1>
<h4>{{ count }}</h4>
<h4>{{ test }}</h4>
<button @click="jump">jump</button>
</div>
</template>
<script lang='ts'>
import { onMounted, ref, watchEffect, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("success");
}, 1000);
});
};
export default {
setup() {
const test = ref("test");
const route = useRoute();
const router = useRouter();
const count = ref(0);
const effect = async (onInvalidate) => {
console.log('監(jiān)聽(tīng)route'+route.query);
onInvalidate(() => {
console.log("執(zhí)行onInvalidate");
});
const res = await fetchData();
console.log(res);
test.value = res;
};
onBeforeMount(() => {
console.log("onBeforeMount");
});
onMounted(() => {
console.log("onmounted");
});
const unWachEffect = watchEffect(effect);
useRoute();
setTimeout(() => {
console.log("5秒時(shí)間后注銷WachEffect");
unWachEffect();
}, 5000);
setInterval(() => count.value++, 1000);//每一秒count自加1,因?yàn)閣atchEffect帶有該參數(shù),所以改變時(shí)會(huì)自動(dòng)觸發(fā)
const jump = () => {
router.push(`?time=${new Date().getTime()}`);
};
return { count, jump, test };
},
beforeCreate() {
console.log("beforeCreate");
},
};
</script>
iii. onInvalidate函數(shù)的執(zhí)行時(shí)機(jī),
(1). effect里的值改變時(shí),會(huì)先于內(nèi)部函數(shù)執(zhí)行
(2). 偵聽(tīng)器被停止(組件unMounted也會(huì)關(guān)閉偵聽(tīng)器)
- 如何使用向vue2那樣讀取route和使用router?
使用import { useRoute, useRouter } from "vue-router";如上面示例代碼所示.
