不要在vue中使用函數式綁定依賴

如果你正在使用vue編寫業務，可能遇到一個資料比較多，他們都遵循相同的模式，需要在data裡定義多個變量來綁定依賴，然後你不想在data裡定義多個變量，在接口調回後每個都重新指派，采用這種方式綁定依賴

<div v-if='fuctionA(args)'>
</div>
<div v-for='item in fuctionB()' >
 <div v-if='Myfunction(item )' :style='fuctionA(item.attribute)'></div>
</div>


           

所有的依賴都通過一個函數return，給函數傳入不同參數來傳回一個資料，這種寫法雖然簡潔，data中不用定義變量，但會導緻當觸發元件更新時，這些函數又會全部執行一次,如果你的數組長度過長，或者元件更新很頻繁，就會導緻記憶體占用過大，函數暴棧，頁面崩潰等問題

比如以下示例：

<template>
  <div>
    <div v-for="item in navList" :style="styleConfig('nav')" :key="item.id">
      導航父級菜單
      <div v-for="item2 in item.chilren" :key="item2.id" :style="styleConfig('navChild')">子菜單</div>
    </div>
    <div :style="styleConfig('c')"></div>
    <div :style="styleConfig('d')"></div>
    <div class="num">{{num}}</div>
  </div>
</template>

<script>
// 假如以下就是傳回的資料

//菜單清單
let dataList = [],
  chilrenList = [];
for (let i = 0; i < 20; i++) {
  dataList.push({
    name: `父級菜單${i}`,
    id:`a${i}`
  });
  chilrenList.push({
    name: `子級菜單${i}`,
     id:`b${i}`
  });
  dataList[i].chilren = chilrenList;
}
// 動态設定的樣式
let config = {
  navConfig: {
    color: "#333333",
    hoverColor: "#e6e6e6",
    bgColor: "#ffffff",
    hoverBgColor: "#d3d3d3",
    childColor: "#333333",
    childHoverColor: "#e6e6e6",
    childBgColor: "#ffffff",
    childHoverBgColor: "#d3d3d3"
  },
  config1: {},
  config2: {}
  //... 可能還有會有很多個配置
};
export default {
  data() {
    return {
      num: 1,
      navList: []
    };
  },
  mounted() {
    this.navList = dataList;
    // 通過一個定時器來觸發元件實時更新
    setInterval(() => {
      this.num++;
    }, 1000);
  },
  methods: {
    //傳入不同的key來傳回不同的樣式
    styleConfig(key) {
      console.log("abc");
      if (key === "nav") {
        return {
          color: config.navConfig.color,
          backGroundColor: config.navConfig.bgColor
        };
      } else if (key === "navChild") {
        return {
          color: config.navConfig.childColor,
          backGroundColor: config.navConfig.childBgColor
        };
      } else {
        return {
          width: "15px"
        };
      }
    }
  }
};
</script>
           

可以看到我通過一個定時器來觸發元件更新, 菜單的動态樣式直接綁定一個函數傳回，每當觸發更新時函數就會執行20+20+2=42次，接下來可以看到：

明明可以隻需要在第一次渲染時執行4次，結果導緻了每次更新都會執行42次,這樣必會造成記憶體的損耗，數組長度過多，元件更新頻繁，必然會引起函數暴棧，頁面崩潰

稍微改寫一下

<template>
  <div>
    <div v-for="item in navList" :style="config.nav" :key="item.id">
      導航父級菜單
      <div v-for="item2 in item.chilren" :key="item2.id" :style="config.navChild">子菜單</div>
    </div>
    <div :style="config.c"></div>
    <div :style="config.d"></div>
    <div class="num">{{num}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      navList: [],
      config:{
        nav:'',
        navChild:'',
        c:'',
        d:'',
      }
    };
  },
  mounted() {
    this.navList = dataList;
    let attr=Object.keys(this.config)
     attr.forEach(key=>{
       this.config[key]=this.styleConfig(key)
     })
   // 通過一個定時器來觸發元件實時更新
    setInterval(() => {
      this.num++;
    }, 1000);
  },
};
</script>

           

 在data中定義一個config，對應的屬性來儲存動态樣式，把屬性名當做之前的條件key 傳給函數，

  可以看到函數隻會在第一次渲染時調用

是以老老實實用data中聲明的變量來綁定依賴，不要用函數