jsp网站开发难吗,访客留言网站,制作的大型网站多少钱,制作图片的app免费watch() 一共可以接受三个参数#xff0c;侦听数据源、回调函数和配置选项
作用#xff1a;监视数据的变化#xff08;和Vue2中的watch作用一致#xff09;
特点#xff1a;Vue3中的watch只能监视以下四种数据#xff1a;
ref定义的数据。 reactive定义的数据。 函数返…watch() 一共可以接受三个参数侦听数据源、回调函数和配置选项
作用监视数据的变化和Vue2中的watch作用一致
特点Vue3中的watch只能监视以下四种数据
ref定义的数据。 reactive定义的数据。 函数返回一个值getter函数。 一个包含上述内容的数组 ref 定义的数据
templatedivstr{{ str }}/divdivperosn 的name{{ personObj.name }}/divdivPerson 的age{{ personObj.age }}/divdivPerson的Car{{ personObj.car }}/divdivPerson的Car.color{{ personObj.car.color }}/divdivPerson的Car.price{{ personObj.car.price }}/divdivel-button clickeditPerson点击修改部分属性/el-buttonel-button clickeditPersonAll点击修改全部/el-buttonel-button clickeditString修改基本数据类型/el-button/div
/templatescript setup langts
import { reactive, watch, ref, toRefs, Ref } from vue;
interface Person {name: string;age: number;car: {price: number;color: string;};
}
// let str: Refstring ref(AAA); // 泛型写法
let str ref(AAA);
let personObj refPerson({name: aaa,age: 12,car: {price: 12,color: reds,},
});
const editPerson () {personObj.value.name bbb;
};
const editPersonAll () {personObj.value.car {price: 222,color: blue,};
};const editString () {str.value Bbb;
};
// 监听基本数据类型变化
watch(() str.value,(newValue, oldValue) {console.log(监听基本数据类型变化newValue);console.log(newValue);console.log(oldValue);}
);
// 监听对象类型某个值的变化
watch(() personObj.value.name,(newValue, oldValue) {console.log(personObj.value.name);console.log(newValue newValue);console.log(oldValue oldValue);}
);/* 监视情况一监视【ref】定义的【对象类型】数据监视的是对象的地址值若想监视对象内部属性的变化需要手动开启深度监视watch的第一个参数是被监视的数据watch的第二个参数是监视的回调watch的第三个参数是配置对象deep、immediate等等..... */
watch(personObj,(newValue, oldValue) {console.log(修改整个车);console.log(newValue);let { car, name, age } toRefs(newValue);console.log(car, name.value, age.value);console.log(oldValue);// let {car,name,age} toRefs(oldValue)// console.log(car,name,age);},{deep: true,}
);
/scriptstyle scoped/style
reactive 定义的数据 ref 写法
templatedivperosn 的name{{ personObj.name }}/divdivPerson 的age{{ personObj.age }}/divdivPerson的Car{{ personObj.car }}/divdivPerson的Car.color{{ personObj.car.color }}/divdivPerson的Car.price{{ personObj.car.price }}/divdivel-button clickeditPerson点击修改部分属性/el-buttonel-button clickeditPersonAll点击修改全部/el-button/div
/template
script setup langts
import { reactive, watch, ref } from vue;
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj reactivePerson({name: aaa,age: 12,car: {price: 12,color: reds,},
});
const editPerson () {personObj.name bbb;
};
const editPersonAll () {personObj.car {price: 222,color: blue,};
};
//监听基本数据类型的写法
watch(() personObj.name,(newValue, oldValue) {console.log(newValue newValue);console.log(oldValue oldValue);}
);
监听对象类型的写法 (推荐使用这种方法)
// watch(
// () personObj.car,
// (newValue, oldValue) {
// console.log(修改整个车);
// console.log(newValue newValue);
// console.log(oldValue oldValue);
// }
// );
监听对象类型的写法
watch(personObj.car, (newValue, oldValue) {console.log(修改整个车);console.log(newValue newValue);console.log(oldValue oldValue);
});
/script监听多个值变化 ref 写法
templatedivperosn 的name{{ personObj.name }}/divdivPerson 的age{{ personObj.age }}/divdivPerson的Car{{ personObj.car }}/divdivPerson的Car.color{{ personObj.car.color }}/divdivPerson的Car.price{{ personObj.car.price }}/divdivel-button clickeditPersonName点击修改name/el-buttonel-button clickeditPersonCarColor点击修改car-color/el-button/div
/templatescript setup langts
import { tr } from element-plus/es/locales.mjs;
import { reactive, watch, ref, toRefs, Ref } from vue;
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj refPerson({name: aaa,age: 12,car: {price: 12,color: reds,},
});
const editPersonName () {personObj.value.name bbb;
};
const editPersonCarColor () {personObj.value.car.color bule;
};// 监听对象类型某个值的变化
// 传入的是数组 获取到的newValue 也是数组一一对应的关系
watch([() personObj.value.name, personObj.value.car],(newValue, oldValue) {console.log(personObj.value--watch);console.log(newValue);console.log(oldValue);},{deep: true,}
);
/scriptstyle scoped/style
reactive 写法
templatedivperosn 的name{{ personObj.name }}/divdivPerson 的age{{ personObj.age }}/divdivPerson的Car{{ personObj.car }}/divdivPerson的Car.color{{ personObj.car.color }}/divdivPerson的Car.price{{ personObj.car.price }}/divdivel-button clickeditPersonName点击修改name/el-buttonel-button clickeditPersonCarColor点击修改car-color/el-button/div
/templatescript setup langts
import { tr } from element-plus/es/locales.mjs;
import { reactive, watch, ref, toRefs, Ref } from vue;
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj reactivePerson({name: aaa,age: 12,car: {price: 12,color: reds,},
});
const editPersonName () {personObj.name bbb;
};
const editPersonCarColor () {personObj.car.color bule;
};// 监听对象类型某个值的变化
// 传入的是数组 获取到的newValue 也是数组一一对应的关系
watch([() personObj.name, personObj.car],(newValue, oldValue) {console.log(personObj.value--watch);console.log(newValue);console.log(oldValue);},{deep: true,}
);
/scriptstyle scoped/style
