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

<div v-if='fuctionA(args)'> </div> <div v-for='item in fuctionB()' ><div v-if='functionC(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);},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>

在data中定義一個config，對應的屬性來保存動態樣式，把屬性名當做之前的條件key 傳給函數，循環拿到對應的值，把用綁定依賴的函數替換成config的屬性

可以看到函數只會在第一次渲染時調用，更新時不再調用：

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

總結

以上是生活随笔為你收集整理的vue 中watch函数名_vue中避免使用函数来绑定依赖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。