VUE的性能优化

目录

1.data属性

2.keep-alive缓存组件

3.拆分组件

---

1.data属性

2.keep-alive缓存组件

3.拆分组件

4.对象冻结

• 用于纯列表渲染，数据无交互的情况，可以禁止 vue 劫持绑定，节省内存，提升性能

• <script>
  import * as Api from "@/common/apiNew.js";
  export default {
    data() {
      return {
        dataList: Object.freeze(this.list),
      };
    },
    methods: {},
  };
  </script>

  5.递归数组

• tree 组件常用
• 层级是根据后台数据决定的，不知道是多少级
• 当前场景需要用到动态组件

概念

• 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可
• 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
• 组件递归用来开发一些具体有未知层级关系的独立组件（比如常见的：联级选择器和树形控件 ）

<template>
  <div v-for="(item,index) in treeArr">
      子组件，当前层级值： {{index}} <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: () => []
    }
  }
}
</script>