created() { console.log("商品编号", this.$route.query.id); console.log("商品图片路径:", this.$route.query.src); console.log("商品描述:", this.$route.query.text); console.log("商品价格:", this.$route.query.price); },
时间: 2024-04-01 18:35:14 浏览: 57
这段代码也是Vue.js框架中的生命周期钩子函数`created()`,用于在组件创建完毕后执行一些代码。在这里,它被用于打印出从URL中传递的商品信息。`this.$route.query`可以获取到路由中的查询参数,通过`.`符号和参数名称可以获取到具体的参数值,例如`this.$route.query.id`获取到的是商品编号。
相关问题
怎么优化这段代码export default { data() { return { goodsId: " ", goodsData: [], current: 0, oldScrollTop: 0, scrollTop: 0, searchBgc: " rgba(0, 0, 0, 0.1)", show: false, opacity: 0, flag: true, }; }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener("scroll", this.handleScrollFn); //离开当前组件别忘记移除事件监听哦 }, watch: { scrollTop: { handler: function (newValue, oldValue) { clearTimeout(this.timer); this.timer = setTimeout(() => { if (newValue == window.scrollY) { this.oldScrollTop = newValue; if (this.oldScrollTop > 100) { this.show = true; } else { this.show = false; } } else { if (this.oldScrollTop == oldValue) { // console.log("滚动开始"); } } }, 20); }, immediate: true, }, }, methods: { handleScroll() { this.handleScrollFn = () => { this.scrollTop = window.scrollY; }; window.addEventListener("scroll", this.handleScrollFn); }, onClickLeft() { this.$router.go(-1); }, onChange(index) { this.current = index; }, returnFn() { this.$router.go(-1); }, // 加入购物车 joinShopCar() { alert("加入购物车成功"); let shopcarList = JSON.parse(localStorage.getItem("shopcar")) || []; console.log(shopcarList); this.goodsData.num = 1; this.goodsData.isChecked = false; let ind = shopcarList.findIndex((ele) => { return ele.id == this.goodsId; }); console.log(ind); // 如果有相同的返回该数据的下标,没有则返回-1 if (ind != -1) { shopcarList[ind].num++; } else { shopcarList.push(this.goodsData); } localStorage.setItem("shopcar", JSON.stringify(shopcarList)); this.$router.push("/shopcar"); }, // 立即结算 payFn() { localStorage.setItem("goodspay", JSON.stringify(this.goodsData)); this.$router.push("/pay"); }, }, async created() { this.goodsId = this.$route.query.id; try { let { data } = await getGoodsDetailApi(this.goodsId); this.goodsData = data.data.goodsData; console.log(this.goodsData); } catch (err) { console.log(err); } }, };
这段代码可以考虑进行以下优化:
1. 将方法中的注释删除,因为这些注释并没有提供太多有用的信息,反而会干扰代码的阅读。
2. 将所有的变量定义在最上面,以便于阅读和维护。同时,可以将一些不经常使用的变量定义为局部变量,以减少内存的占用。
3. 将一些方法提取出来,封装成单独的函数并放在外部,以提高代码的可复用性和可读性。
4. 为了提高代码的性能,可以将一些异步操作放到 created 钩子函数中,以免影响页面的渲染速度。
5. 对于方法中的一些重复代码,可以进行优化,如将相同部分提取出来,避免重复代码的出现。
6. 对于一些可能产生副作用的操作,如 alert(),应该尽量避免在代码中使用,以免影响用户体验。
下面是优化后的代码:
```
<template>
<!-- 模板代码 -->
</template>
<script>
import { getGoodsDetailApi } from "@/api"; // 导入 api 接口
export default {
data() {
return {
goodsId: " ",
goodsData: [],
current: 0,
oldScrollTop: 0,
scrollTop: 0,
searchBgc: "rgba(0, 0, 0, 0.1)",
show: false,
opacity: 0,
flag: true,
timer: null,
};
},
mounted() {
this.handleScroll();
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollFn);
},
watch: {
scrollTop: {
handler: function (newValue, oldValue) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (newValue == window.scrollY) {
this.oldScrollTop = newValue;
this.show = this.oldScrollTop > 100;
} else {
if (this.oldScrollTop == oldValue) {
// 滚动开始
}
}
}, 20);
},
immediate: true,
},
},
methods: {
// 监听滚动事件
handleScroll() {
this.handleScrollFn = () => {
this.scrollTop = window.scrollY;
};
window.addEventListener("scroll", this.handleScrollFn);
},
// 返回上一页
onClickLeft() {
this.$router.go(-1);
},
// 切换商品详情页
onChange(index) {
this.current = index;
},
// 返回上一页
returnFn() {
this.$router.go(-1);
},
// 加入购物车
joinShopCar() {
if (confirm("确定要加入购物车吗?")) {
let shopcarList = JSON.parse(localStorage.getItem("shopcar")) || [];
this.goodsData.num = 1;
this.goodsData.isChecked = false;
let ind = shopcarList.findIndex((ele) => {
return ele.id == this.goodsId;
});
if (ind != -1) {
shopcarList[ind].num++;
} else {
shopcarList.push(this.goodsData);
}
localStorage.setItem("shopcar", JSON.stringify(shopcarList));
this.$router.push("/shopcar");
}
},
// 立即结算
payFn() {
localStorage.setItem("goodspay", JSON.stringify(this.goodsData));
this.$router.push("/pay");
},
// 获取商品详情数据
async getGoodsDetail() {
try {
let { data } = await getGoodsDetailApi(this.goodsId);
this.goodsData = data.data.goodsData;
console.log(this.goodsData);
} catch (err) {
console.log(err);
}
},
},
created() {
this.goodsId = this.$route.query.id;
this.getGoodsDetail();
},
};
</script>
```
如何解决报错vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'musicSize')" found in ---> <Anonymous> <App> at src/App.vue <Root>在<template> <div> <div class="flex"> <i class="iconfont icon-fanhuijiantou" @click="returntop"></i> <i class="iconfont icon-diandian"></i> </div> <div class="container"> <h5>{{ name }}</h5> <p>{{ alias }}</p> <p>{{ formatNumber(fansCnt) }}</p> <p class="hheight">{{ imageDesc }}</p> <div class="one"> <span>+ 关注</span> <i class="iconfont icon-xiangxiajiantou"></i> </div> </div> <van-tabs v-model="active" class="over"> <van-tab title="主页"> <homePage></homePage> </van-tab> <van-tab title="歌曲" :badge="singerdeatilList.artist.musicSize"> <songView :id="this.id"></songView> </van-tab> <van-tab title="专辑" :badge="singerdeatilList.artist.albumSize"> <album-view :id="this.id"></album-view> </van-tab> <van-tab title="视频" :badge="singerdeatilList.videoCount"> <videoView></videoView> </van-tab> </van-tabs> </div> </template> <script> import { singerDetailsApi, singerFansApi } from "@/api/singer"; import albumView from "@/views/singer/components/albumView.vue"; import homePage from "@/views/singer/components/homePage.vue"; import songView from "@/views/singer/components/songView.vue"; import videoView from "@/views/singer/components/videoView.vue"; export default { components: { albumView, homePage, songView, videoView, }, data() { return { active: 1, singerdeatilList: [], id: "", fansCnt: "", name: "", //歌手姓名 imageDesc: "", //歌手身份 alias: [], //歌手别名 musicSize: "", //音乐数量 albumSize: "", //专辑数量 }; }, methods: { returntop() { this.$router.push("/singerClass"); }, // fn(fans) { // if (fans > 10000) { // return (fans / 10000).toFixed(1) + "万粉丝"; // } // }, }, async created() { try { // 用query页面数据不会丢失 this.id = this.$route.query.id; let { data } = await singerDetailsApi(this.id); let fans = await singerFansApi(this.id); this.singerdeatilList = data.data; // 歌手名字 this.name = this.singerdeatilList.artist.name; // console.log(this.singerdeatilList.artist.name); // 粉丝数量 this.fansCnt = fans.data.data.fansCnt; // console.log(fans.data.data); // console.log(this.singerdeatilList); // 歌手身份 this.imageDesc = this.singerdeatilList.identify.imageDesc; // 歌手别名 this.alias = this.singerdeatilList.artist.alias[0]; } catch (err) { console.log(err); } }, };这段代码里
报错信息显示 `TypeError: Cannot read properties of undefined (reading 'musicSize')`,意味着在模板中使用 `singerdeatilList.artist.musicSize` 时,`singerdeatilList.artist` 为 `undefined`。
这可能是因为在 `created()` 生命周期中,异步请求的数据还没有返回,导致 `singerdeatilList` 为空。因此,可以在模板中增加一个条件判断,当 `singerdeatilList.artist` 存在时才渲染 `:badge` 属性。
例如:
```
<van-tab title="歌曲" v-if="singerdeatilList.artist" :badge="singerdeatilList.artist.musicSize">
<songView :id="this.id"></songView>
</van-tab>
```
这样就可以避免因为数据还未返回而导致的报错问题。
阅读全文