vue3的computed的用法

原创已于 2022-04-06 21:10:35 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-10-09 01:16:16 首次发布

vue2/vue3全家桶专栏收录该内容

42 篇文章

订阅专栏

本文档介绍了如何在Vue应用中使用计算属性，包括只读和可读写两种模式，并通过实例演示了如何创建和管理计算属性。了解如何利用`reactive`和`computed`函数实现动态数据绑定和复杂逻辑计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下提供一个简单的demo，仅供参考

demo示例

template部分

<template>
	 <div>简单只读:{{ obj.computedAllNum1 }}</div>
	  <input v-model="obj.num1" />
	  <br />
	  <input v-model="obj.num2" />
	  <---计算属性->
	  <p>{{computedRes  }}</p>
	  <div>可读可写</div>
	  <input v-model="obj.computedAllNum1" />
	  <br />
</template>

javascript部分

<script>
import { reactive, computed } from "vue";
export default {
  name: "HelloWorld",

  setup(props, context) {
    // 计算属性
    const obj = reactive({
      num1: 1,
      num2: 2,
      computedAllNum1: "",
      computedAll :0
    });
    
    // 简单只读计算-方式一
    obj.computedAllNum1 = computed(() => {
      return obj.num1 + "-" + obj.num2;
    });

    // 可读可写的计算-方式二
    obj.computedAllNum1 = computed({
      get() {
        return obj.num1 + "-" + obj.num2;
      },
      set(value) {
        console.log(value);
        obj.num1 = value.split("-")[0];
        obj.num2 = value.split("-")[1];
      },
    });
      let computedRes = computed(() => (obj.computedAll += 10));
    return { obj,computedRes  };
  },
};