了解响应式原理后对代码的一点小重构

在操作一个响应式变量的时候，可能会多次去取这个响应式变量的值，这就意味着会多次执行依赖收集中的get,可以用一个局部变量缓存下来，这样只需要一次get操作.

// 比如商城业务中，根据价格筛选不同的商品
data: () => ({
	goods: []
}),
computed: {
	specialGoods() {
		let goods = this.goods
		xxx
	}
}

封装组件时，让props响应式

父组件给子组件传递props时，有的时候需要改变这个props, 然后子组件做一些操作，让props变成响应式操作起来会方便一些，可以用计算属性包一下

  • Child.vue
  • 在模板中直接使用calcList即可
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		calcList() {
			return xx
		}
	}
}

数据结构层级比较深时，用v-if

有时候数据结构层级比较深，在模板上渲染时，服务端还没有发送过来，会报一个cannot read property of undefined , 就是不能从undefined 上 读取xx属性，这个时候加个v-if,确保数据到了再渲染

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。