watch: { currentSwiper: { handler(newInfo, oldInfo) { // console.log("监听") if(newInfo == 0 || newInfo == 1){ this.navTitle = this.tabberList[newInfo].title }else{ this.navTitle = "卷卷x" + this.tabberList[newInfo].title } this.currentData = this.tabberList[newInfo] this.formData = { userid: uni.getStorageSync('userid_storage'), mobile: '', province: '', city:'' } this.huaIndex = 0 this.mianList = [] this.huiyuanList = [] this.huiyuanTypeActive = 0 this.huiyuanTypeName = '' this.huiyuanRule = '' if (this.currentData.type == 1) { this.getHuafei() }else{ this.getDetail() } }, },

这段代码是Vue组件中的watch监听器，当currentSwiper属性值发生变化时会自动执行handler函数。在这个函数中，首先根据currentSwiper的值设置navTitle属性，然后根据currentSwiper的值设置其他属性的初始值，包括currentData、formData、huaIndex、mianList、huiyuanList、huiyuanTypeActive、huiyuanTypeName和huiyuanRule。最后根据currentData的type属性值决定调用getHuafei()方法还是getDetail()方法。

相关问题

优化一下这段代码 methods: { handleScroll() { window.addEventListener("scroll", () => { this.scrollTop = window.scrollY; }); }, returnFn() { // this.$router.go(-1); console.log(111); }, }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener("scroll"); //离开当前组件别忘记移除事件监听哦 }, async created() { try { // 轮播图 let { data } = await getSwiperApi(); this.swiperList = data.data.list; let res = await getGoodsListApi(); this.goodsList = res.data.data.list; // console.log(this.swiperList); // 活动 let active = await getActiveApi(); this.activeList = active.data.data.list; // console.log(this.activeList); } catch (err) { console.log(err); } }, watch: { scrollTop: { handler: function (newValue, oldValue) { clearTimeout(this.timer); //清除之前的定时器 this.timer = setTimeout(() => { if (newValue == window.scrollY) { //滚动结束时执行 this.oldScrollTop = newValue; if (this.oldScrollTop > 100) { this.searchBgc = "#ccc"; } else { this.searchBgc = "transparent"; } } else { //滚动中时执行 if (this.oldScrollTop == oldValue) { //滚动开始时执行 // console.log("滚动开始"); } } }, 20); }, immediate: true, //立即执行handler函数 }, },

可以优化代码如下：

methods: {
handleScroll() {
this.handleScrollFn = () => {
this.scrollTop = window.scrollY;
}
window.addEventListener("scroll", this.handleScrollFn);
},
returnFn() {
// this.$router.go(-1);
console.log(111);
},
},
mounted() {
this.handleScroll();
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollFn); //移除事件监听
},
async created() {
try {
// 轮播图
let { data } = await getSwiperApi();
this.swiperList = data.data.list;
let res = await getGoodsListApi();
this.goodsList = res.data.data.list;
// console.log(this.swiperList);
// 活动
let active = await getActiveApi();
this.activeList = active.data.data.list;
// console.log(this.activeList);
} catch (err) {
console.log(err);
}
},
watch: {
scrollTop: {
handler: function (newValue, oldValue) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (newValue == window.scrollY) {
this.oldScrollTop = newValue;
if (this.oldScrollTop > 100) {
this.searchBgc = "#ccc";
} else {
this.searchBgc = "transparent";
}
} else {
if (this.oldScrollTop == oldValue) {
// console.log("滚动开始");
}
}
}, 20);
},
immediate: true,
},
},

优化的主要点如下：

1. 将事件监听函数 handleScroll 改为箭头函数，以便在 beforeDestroy 钩子中移除事件监听时可以正确地移除。
2. 在添加事件监听时，将 handleScroll 函数传递给 addEventListener，以便在 beforeDestroy 钩子中可以正确地移除事件监听。
3. 在 watch 中的 handler 函数中，同样将事件监听函数存储在变量中，以便在组件销毁时可以正确地移除事件监听。
4. 将 try/catch 包裹在 async/await 中，以便正确地捕获错误。

phone:{ handler(newInfo, oldInfo) { this.yunyingshang = '' if(newInfo.length == 11){ this.getYunyingshang(newInfo) } } }

这段代码是Vue组件中的watch监听器，当phone属性值发生变化时会自动执行handler函数。在这个函数中，首先将yunyingshang属性重置为空字符串。然后判断phone的长度是否为11，如果是则调用getYunyingshang(newInfo)方法，该方法会通过手机号查询运营商信息并将结果赋值给yunyingshang属性。