57uv6Z6g55qE5Y2a5a6i

MS4wLjABAAAA5qMD8Gzdcgq7HXUOviKB59i0-ybJ59jJvNzyaPt5XOsVNqP6DU7WLcoAXvdxvYdp💗
本站所有文章仅作技术研究，请勿非法破坏，请遵守相关法律法规，后果自负

【笔记】Vue3的计算属性

发表于 2025-11-08 更新于 2025-12-26 分类于 Vue学习指北阅读次数：

前言

Vue3的计算属性学习笔记

OptionsAPI

<template>
  {{ key }}
</template>

<script>
  export default {
    data: function () {
      return {
        internalKey: "value"
      }
    },
    computed: {
      key: {
        get: function () {
          return this.internalKey;
        },
        set: function (value) {
          this.internalKey = value;
        }
      }
    }
  }
</script>

CompositionAPI

计算属性使用ref进行包裹，所以使用时需要手动解包

setup函数

<script>
  import { computed } from "vue"
  
  export default {
    setup: function (attrs, slots, emit) {
      const key = computed({
        set: function (newValue) {
          console.log(newValue);
        },
        get: function () {
          return "value";
        }
      });

      // 手动解包
      console.log(key.value);
      
      return {
       key
      };
    }
  }
</script>

简写，只包含get

<script>
  import { computed } from "vue"
  
  export default {
    setup: function (attrs, slots, emit) {
      const key = computed(() => {
        return "value";
      });

      key.value += "1";
      
      return {
        key
      };
    }
  }
</script>

完成

0%