vue (computed)计算属性用法总结开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

一、vue2.0 计算属性阐述

1.computed 阐述

监听值未在data中定义，以return返回值形式；
计算属性变量在computed中定义，属性监听在data中定义。
计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。
计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。
计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

2.computed 使用阐述

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed微信
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

以下示例读取渲染

<template>
  <div>
    <div>{{ formSum.sum }}</div>
    <div><button @click="buttonPlusClcik">加点击</button></div>
    <div>{{ dataSum.sum }}</div>
    <div><button @click="buttonReduceClcik">减点击</button></div>
    <!-- 总和展示 -->
    <div>{{ theSum }}</div>
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      formSum: {
        sum: 0,
        sumbutton: 100,
      },
      dataSum: {
        sum: 10,
        sumbutton: 1000,
      },
    };
  },
  computed: {
    theSum() {
      // 计算数值的总和
      return this.formSum.sum + this.formSum.sumbutton + this.dataSum.sum + this.dataSum.sumbutton;
    },
  },

  methods: {
    // 加
    buttonPlusClcik() {
      this.formSum.sum += 1;
      this.formSum.sumbutton += 100;
    },
    // 减
    buttonReduceClcik() {
      this.dataSum.sum -= 1;
      this.dataSum.sumbutton -= 100;
    },
  },
};
</script>

3.computed 传参问题

官方文档说明中，并不支持的在computed中进行传参操作，假如现在就想在computed中进行传参操作该怎么做呢？在JavaScript语言中，我们提到过闭包这种设计，它的主要作用，不就是用来访问其他函数内部的变量，然后返回操作结果。所以，我们可以利用闭包来实现。

<template>
  <div>
    <div>{{ formSum.sum }}</div>
    <div><button @click="buttonPlusClcik">点击</button></div>
    <div>{{ dataSum.sum }}</div>
    <div><button @click="buttonReduceClcik">点击</button></div>
    <!-- 传递参数改变总和展示 -->
    <div>{{ theSum(formSum.sum, dataSum.sum, formSum.sumbutton, dataSum.sumbutton) }}</div>
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      formSum: {
        sum: 0,
        sumbutton: 100,
      },
      dataSum: {
        sum: 10,
        sumbutton: 1000,
      },
    };
  },
  computed: {
    theSum() {
      return function (a, b, c, d) {
        return a + b + c + d;
      };
    },
  },
  methods: {
    buttonPlusClcik() {
      this.formSum.sum += 1;
      this.formSum.sumbutton += 100;
    },
    buttonReduceClcik() {
      this.dataSum.sum -= 1;
      this.dataSum.sumbutton -= 100;
    },
  },
};
</script>

4.computed 【getter和setter】

计算属性拥有的两个方法：getter setter 用来实现数据的双向绑定

每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法，只是利用了 getter来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style

<template>
  <div>
    <div id="example">
      <p>给定以下三个词语组成一句话</p>
      <span>{{ nameOne }}</span>
      <span>{{ nameTwo }}</span>
      <span>{{ son }}</span>
      <p style="padding: 12px 0">答案为：{{ result }}</p>
      <button @click="btnClick">改变语句</button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      nameOne: "父亲",
      nameTwo: "母亲",
      son: "儿子",
    };
  },
  computed: {
    result: {
      // 与不写get  set方法的形式有区别
      // 一个计算属性的getter
      get: function () {
        // 三个值变化的时候，result的值会自动更新，也会自动更新DOM结构
        return this.nameOne + this.nameTwo + this.son;
      },
      // 一个计算属性的setter
      set: function (newVal) {
        // 当设置result的时候，其他的值也会相应的发生改变
        this.nameOne = newVal.substr(0, 2);
        this.nameTwo = newVal.substr(2, 2);
        this.son = newVal.substr(4);
      },
    },
  },
  methods: {
    btnClick() {
      this.result = "儿子外出打工";
    },
  },
};
</script>

5.computed 与 watch 使用区别阐述

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
watch监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
watch监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

vue2.0监听使用与阐述

二、vue3.0 计算属性阐述

1.computed 使用阐述

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

<template>
  <div>
    <input type="text" v-model="formData.one" />
    <input type="text" v-model="formData.two" />
    <input type="text" v-model="getName" />
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue';
const formData = reactive<{ one: Number; two: Number }>({
  one: 1,
  two: 1,
});

const getName = computed(() => {
  return Number(formData.one) + Number(formData.two);
});
</script>

2.computed 【getter和setter】

计算属性拥有的两个方法：getter setter 用来实现数据的双向绑定

每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法，只是利用了 getter来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style

<template>
  <div>{{ eData.one }}</div>
  <div>
    <input type="text" v-model="formData.one" />
    <input type="text" v-model="formData.two" />
    <input type="text" v-model="getName" />
  </div>
  <div><button @click="btn">点击</button></div>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
const formData = reactive<{ one: Number; two: Number }>({
  one: 1,
  two: 1,
});
const eData = reactive<{ one: Number }>({
  one: 1,
});
let getName = computed({
  // 与不写get  set方法的形式有区别
  // 一个计算属性的getter
  get: function () {
    // 三个值变化的时候，result的值会自动更新，也会自动更新DOM结构
    return Number(formData.one) + Number(formData.two);
  },
  // 一个计算属性的setter
  set: function (newVal: any) {
    // 当设置result的时候，其他的值也会相应的发生改变
    eData.one = Number(newVal.one) + Number(newVal.two);
  },
});
const btn = () => {
  getName.value = {
    one: formData.one,
    two: formData.two,
  };
};
</script>

【有修改请留言】

vue (computed)计算属性用法总结

一、vue2.0 计算属性阐述

1.computed 阐述

2.computed 使用阐述

以下示例 读取渲染

3.computed 传参问题

4.computed 【getter和setter】

5.computed 与 watch 使用区别阐述

二、vue3.0 计算属性阐述

1.computed 使用阐述

2.computed 【getter和setter】

以下示例读取渲染