关于vue的一些使用总结

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

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

1. // 比如商城业务中，根据价格筛选不同的商品
2. data: () => ({
3.         goods: []
4. }),
5. computed: {
6.         specialGoods() {
7.                 let goods = this.goods
8.                 xxx
9.         }
10. }

复制代码

封装组件时，让props响应式

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

• Child.vue
  
• 在模板中直接使用calcList即可
  

1. export default {
2.         props: {
3.                 list: {
4.                         type: Array,
5.                         default: () => []
6.                 }
7.         },
8.         computed: {
9.                 calcList() {
10.                         return xx
11.                 }
12.         }
13. }

复制代码

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！