uniapp中computed踩得坑

呔！快到兜里来～

已于 2023-06-14 17:03:53 修改

阅读量966

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2023-06-14 16:53:12 首次发布

本文链接：https://blog.youkuaiyun.com/cp_910506/article/details/131210867

博客围绕JavaScript代码展开，展示了不同方式定义对象属性后`console.log`的输出情况，如`this.list = {}`和`this.list = {order:[], counts: 0}`等，推测输出差异与重新定义对象属性的方式有关，寻求大佬解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp中computed踩得坑

<view class="title">{{marketLength}}</view>
<button @click="add">加长度</button>
<button @click="clear">清空</button>

data() {
	return {
		list: {
			order: [],
			counts: 0
		}
	}
},
computed:{
	marketLength(){
		let counts = 0
		for (let h in this.list.order) {
			counts +=  Number(this.list.order[h].count)
		}
		return counts
	}
},
onLoad(){
	console.log('onLoad===',this.list.order)
},
methods: {
	add(){
		this.list.order.push({count:1})
	},
	clear(){
		this.list = {
			order:[],
			counts: 0
		}
		console.log('clear===',this.list.order)
		/** 以下清空后不会走computed **/
		// 好像是动态添加属性后没有get和set方法
		// 正在找原因
		// this.list = {}
		// this.list.order = []
		// this.list.counts = 0
		// console.log('clear===',this.list.order)  输出
	}
}

onLoad(){
console.log(‘onLoad===’,this.list.order)输出为下图
}
在这里插入图片描述

this.list = {}
this.list.order = []
this.list.counts = 0
console.log(‘clear===’,this.list.order) 输出为下图
在这里插入图片描述
this.list = {
order:[],
counts: 0
}
console.log(‘clear===’,this.list.order)输出为下图

目前只发现这些区别，应该和重新定义对象的属性方式有关。
有大佬知道的话麻烦告知下，感谢