Vue计算属性：简化数据处理和视图更新的利器-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue计算属性：简化数据处理和视图更新的利器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、计算属性的基本使用

计算属性：一个特殊属性，值依赖于另外一些数据动态计算出来。
🚩🚩🚩计算属性特点：函数内使用的变量改变，重新计算结果返回。
💣💣💣注意：
①、计算属性必须定义在computed节点中。
②、计算属性必须是一个function，计算属性必须有返回值。
③、计算属性不能被当当作方法调用，要作为属性来使用。

computed:{
	"计算属性名"(){
		return "值"
	}
}

<template>
	<div>
		<p>和为：{{ num }}</p>
	</div>
</template>

计算属性也是属性, 所以不要和data里重名, 用起来也和data类似

（一）全选反选案例

Vue计算属性：简化数据处理和视图更新的利器,Vue,vue.js,javascript,前端

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="ck" />
    <!-- <button >反选</button> -->
    <ul>
      <li>
        <input type="checkbox" />
        <span>名字</span>
      </li>
    </ul>
  </div>
</template>
  
<script>
export default {
  // 初始化数据
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false, // 该项是否选中？
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
};
</script>
<style>
</style>

Vue计算属性：简化数据处理和视图更新的利器,Vue,vue.js,javascript,前端

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="ck" />
    <!-- <button >反选</button> -->
    <ul>
      <li v-for="(item,i) in arr" :key="i">
        <!-- :checked="item.c" 单项数据绑定 -->
        <!-- v-model="item.c"  双向数据绑定 -->
        <input type="checkbox" v-model="item.c"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

Vue计算属性：简化数据处理和视图更新的利器,Vue,vue.js,javascript,前端

📢📢📢（1）小选决定大选，大选被小选算计出来

方法一 —— forEach循环

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" :checked="bigCk" />
    <!-- <button >反选</button> -->
    <ul>
      <li v-for="(item, i) in arr" :key="i">
        <!-- :checked="item.c" 单项数据绑定 -->
        <!-- v-model="item.c"  双向数据绑定 -->
        <input type="checkbox" v-model="item.c" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
  
<script>
// s四个小选----->决定大选
// 1.四个小选状态,都选中!大选框也要选中!否则,不能选中
// 2.大选框的状态,是由四个小选框的状态决定!由四个小选状态计算出来
// [大选框的状态被计算出来!]
export default {
  // 初始化数据
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: true, // 该项是否选中？
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  //计算属性:
  computed:{
    // 【简单写法】语法:
    // 自定义属性名:(){计算出某个值的过程   return 结果; } 
    bigCk(){
      // 四个小选-->决定大选
      let key;//大选值
      let num=0;// 小选选中的个数

      // 统计小选选中的个数
      // this.arr当前的组件对象arr
      this.arr.forEach(item =>{
        if(item.c==true){
          num++;// 统计
        }
      });

      // num 统计的结果
      if(num==this.arr.length){
        // 选中的个数 和 数组的长度一样
        key = true;
      }else{// 有的没有选中
        key = false;
      }
      return key;
    }
  },
};
</script>

方法二 —— every方法

①、【计算属性的简单写法】

🤔🤔🤔every()方法是数组对象的一个方法，它用于检测数组中的所有元素是否都满足某个条件，如果所有元素都满足条件，则返回true，否则返回false。

ck(){
  return this.arr.every(item => item.c==true)
}

Vue计算属性：简化数据处理和视图更新的利器,Vue,vue.js,javascript,前端

②、【完整写法】

ck:{
  get(){
    return this.arr.every(item => item.c==true);
  }
}

📢📢📢（2）全选算计小选

点击“选中的”全选按钮，所有的选项都取消。

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="ck" />
    <!-- <button >反选</button> -->
    <ul>
      <li v-for="(item, i) in arr" :key="i">
        <!-- v-model="item.c"  双向数据绑定👇👇👇👇👇 -->
        <input type="checkbox" v-model="item.c" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  // 初始化数据
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: true, // 该项是否选中？
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  //计算属性:
  computed:{
      ck:{
        get(){
          return this.arr.every(item => item.c==true);
        },
        set(val){//ck要算计别人,得让视图上有得到ck值机会
          //把val值设置给每一个小选框!
          this.arr.forEach(item =>item.c=val);
        }
      }
  },
};
</script>

🔔🔔🔔注意：
什么时候用计算属性：
①、简单写法：发现某个值，被算计出来！！
②、完整写法：除了被算计，还要算计别人！！

（二）计算属性的设置问题—完整写法

✅✅✅计算属性默认情况下只能获取，不能修改。
✅✅✅要给计算属性赋值，就必须写计算属性的完整写法！！

computed:{
	full:{
		get(){
			...
		},
		set(value){
			...
		}
	}
}

💭💭💭什么时候用计算属性完整写法？给计算属性变量赋值时。

（三）不用计算属性，用函数调用能实现吗？计算属性优势在哪里？

📢📢📢（1）计算属性的缓存说明

🍂🍂🍂计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果。
计算属性如果被多次使用，性能极高。

<template>
  <div>
    <ul>
      <li v-for="(item,i) in list" :key="i"> {{ item }}</li>
    </ul>
    <h1>总分由方法调用:{{ zf() }}</h1>
    <h1>总分由方法调用:{{ zf() }}</h1>
    <h1>总分由方法调用:{{ zf() }}</h1>

    <h1>总分由计算属性:{{ jszf }}</h1>
    <h1>总分由计算属性:{{ jszf }}</h1>
    <h1>总分由计算属性:{{ jszf }}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[88,99,100]
    }
  },
  methods:{
    // 没有使用计算属性,用常规方法调用,返回值
    zf(){
      console.log("方法调用")
      return this.list.reduce((sum,item) => sum+=item,0);
    }
  },
  computed:{
    jszf(){
      console.log("计算属性")
      return this.list.reduce((sum,item) => sum+=item,0);
    }
  }
}
</script>