Vue3.x+TS+组合API Computed()

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

本文记录如果数据比较复杂，一些数据要依赖于其他数据的变化并进行一些规则处理而变化时的问题

正文：

watch和watchEffect可以解决一些数据要依赖于其他数据的变化并进行一些规则处理而变化时的问题，但是watch和watchEffect监听了数据的变化。在某些逻辑中，我们只关心数据在变化，不关心变化前与变化后的结果，那么我们就可以选择computed().

computed()和computed选项作用一样的，都是用于创建依赖于其他状态的计算属性。该方法接收一个getter函数，并为getter返回的值返回一个不可变的响应式ref对象。

请看下面的例子：

一个加法计算器

<template>
  <input type="text" placeholder=" 被加数" v-model='firstNumber' > + <input type="text" placeholder="加数" v-model='secondNumber' > = <input type="text" placeholder="和" v-model='sum'>
  <p>{{sum}}</p>
  <p>{{sum}}</p>
</template>


<script lang="ts">
import { ref, defineComponent, watchEffect, computed } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup: () => {
    const firstNumber = ref(0);
    const secondNumber = ref(0);
    const sum = computed(()=>{
      return Number(firstNumber.value) + Number(secondNumber.value);
    });
    return {firstNumber,secondNumber,sum}
  },
  
  
})
</script>


<style scoped>
a {
  color: #42b983;
}


label {
  margin: 0 0.5em;
  font-weight: bold;
}


code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

computed 内部不仅有getter()，还有一个setter(),但是写法可能略微不同

<template>
  <input type="text" placeholder=" 被加数" v-model='firstNumber' > + <input type="text" placeholder="加数" v-model='secondNumber' > = <input type="text" placeholder="和" v-model='sum'>
  <p>{{sum}}</p>
  <p>{{sum}}</p>
</template>


<script lang="ts">
import { ref, defineComponent, watchEffect, computed } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup: () => {
    const firstNumber = ref(0);
    const secondNumber = ref(0);
    const sum = computed({
        get(){
          return Number(firstNumber.value) + Number(secondNumber.value);
        },
        set(val:number){
          firstNumber.value = val*0.8;
          secondNumber.value = val * 0.2;
        }
      }
    );
    return {firstNumber,secondNumber,sum}
  },
})
</script>


<style scoped>
a {
  color: #42b983;
}


label {
  margin: 0 0.5em;
  font-weight: bold;
}


code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

在上一个案例中computed() 中有一个对象，对象包含get()和set() 方法，set()具有参数，参数为设置的新值在“和”的输入框中输入结果，那么“被加数”和“加数”就会按比例分掉“和”。

计算属性是基于它们的响应依赖关系缓存的，也就是说，计算属性只在相关响应式依赖发生改变时它们才会重新求值。如果依赖关系没有发生改变，多次访问 sum 计算属性会立即返回之前的计算结果，而不必再次执行函数.

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

THANKS ALL !!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746