关于vue的一些使用总结

  • 关于vue的一些使用总结已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

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


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

在操作一个响应式变量的时候,可能会多次去取这个响应式变量的值,这就意味着会多次执行依赖收集中的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,确保数据到了再渲染