Vue3中computed的使用(get和set)

最新推荐文章于 2024-07-24 22:25:19 发布

橙緒媛

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量1.1w

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_61945023/article/details/125720884

版权

本文介绍了Vue中computed属性的基本使用，通过示例展示了如何创建一个依赖于其他变量的响应式属性。当直接修改computed属性时，会触发警告，而使用get和set方法则允许直接更新值。通过get函数获取year的值加1，并在set方法中实现对year的间接修改。

摘要由CSDN通过智能技术生成

computed基本用法：修改year，nextYear会跟着自动+1(不能直接修改nextYear的值）

<template>
  <div>
    <p><input type="text" v-model="year" /></p>
    <p><input type="text" v-model="nextYear" /></p>
  </div>
</template>
<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const year = ref(2022);
    const nextYear = computed(() => {
      return +year.value + 1;
    });
    return {
      year,
      nextYear
    }
  }
}
</script>

当直接修改nextYear是会有警告

computed中get和set的用法：可直接修改nextYear的值

<template>
  <div>
    <p><input type="text" v-model="year" /></p>
    <p><input type="text" v-model="nextYear" /></p>
  </div>
</template>
<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const year = ref(2022);
    const nextYear = computed({
      get() {
        return +year.value + 1;
      },
      set(value) {
        console.log(value);
        return year.value = value - 1
      }
    })
    return {
      year,
      nextYear
    }
  }
}
</script>