vue3之setup的使用理解

// ref=“ruleForm”

// :model=“form”

// :rules=“rules”

//> ref同名属性,并使用ref(null)包装

const ruleForm=ref(null)//通过ref或reactive包裹起来让其成为响应式数据

//2.一旦后面return {ruleForm},vue3会自动绑定ref="ruleForm"的组件

//设定方法,但是要通过ruleForm.value才能拿到组件

const onSubmit=()=>{

ruleForm.value//通过ref包裹的数据需要使用.value来取得相应的值

.validate()//,而reactive包裹的数据不需要通过.value来取得相应的值

.then(() => {

console.log(“values”, form);

})

.catch((error) => {

console.log(“error”, error);

});

}

const resetForm = () => {

console.log(“resetForm”);

ruleForm.value.resetFields();

};

//3.setup必须返回一个对象,把vue在生命周期需要调用的方法,属性暴露出去

return {

ruleForm,//Q:为什么上面要用.value的形式,A:这里会自动解绑

onSubmit,

resetForm

}

}

8、如何调用子组件内setup内的方法

1. 子组件在setup写好方法method,并通过return暴露出去

2. 父组件调用子组件时为其添加ref属性

3. 父组件setup内拿到子组件添加的ref属性property,再通过property.value.method()调用

子组件

// 渲染从父级接受到的值

Son: {{ valueRef }}

父组件

sonRef

<button @click=“sendValue”>send

// 这里ref接受的字符串，要setup返回的ref类型的变量同名

9、vue3如何setup函数如何实现多属性监听,如何实现深度监听

1. 引入watch,watch最后返回unwatch方法,在调用该方法将停止监听

2. watch传入数组,注意,监听的是普通类型可直接输入,若是引用类型,则需要输入函数返回的值,例如要想同时监听data.form.c.c1属性和ddd属性

3. 对于watch第三个传参deep和immediate都不陌生,而flush的作用是决定callback的执行时机,有三个选项,pre(默认),post,sync,分别对应watch在组件更新前,后,时执行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],//传入数组

(newValue, oldValue) => {//结构的也是数组,

//也可以写成([nowddd,nowC1],[preddd,preC1])=>{…}

console.log(new--->${newValue});

console.log(old--->${oldValue});

console.log(newValue[0]);

console.log(newValue);

},

{ deep: true }//第三个参数传入deep,immediate,flush属性

);

setTimeout(() => {

ddd.value = “eee”;

}, 1000);

setTimeout(() => {

data.form.c.c1 = “2222”;

setTimeout(() => {

unwatch();//这里异步使用unwatch方法,后面的ddd.value = "ffff"将不被监听

});

}, 2000);

setTimeout(() => {

ddd.value = “ffff”;

}, 3000);

10、vue3的watchEffect有什么用

1. 它是一个与侦听器,作用和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;

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;

2. 传参的effect函数会在组件beforeCreate之前就执行一次,若该函数里使用到了某些数据,将监听该数据,当监听的数据发生变化时就会(若watchEffect传入了onInvalidate函数,则会先执行onInvalidate函数后)再次执行effect函数.

This is an about page

{{ count }}

{{ test }}

<button @click=“jump”>jump