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

前言

在vue开发过程中，变量a可能由变量b计算所得，我们定义一个函数当b变化时去改变a值，还有另一种简单的方法使用计算属性定义a。计算属性是vue常用属性，在面试中也经常遇到，我们必须要掌握相关知识。

用法

定义

computed计算属性，简单来说可以用于创建变量，变量值会随着依赖值的变化而发生变化。下面我们通过vue3的一个案例来理解依赖变化：

    <template>
    <h1>{{ msg }}</h1>
    </template>
    <script setup lang="ts">
    import { ref, computed } from 'vue';
    const firstName = ref('计算属性');
    const msg = computed(() => firstName.value + 'computed');
    </script>

当我们改变firstName值的时候，msg的值会同步进行修改:

   firstName.value = '修改了'

上面定义的计算属性不能直接修改，要想改变值就得像上面一样修改它所依赖的值，如果真的想要修改值，我们需要用get和set的方式去定义变量：

   const msg = computed({
  get: () => {
    firstName.value + '计算属性';
  },
  set: (value) => {
    console.log(value);
  },
});

调试

计算属性能接受第二个参数用于调试，该参数包含了onTrack和onTrigger 两个回调函数，在上面例子的基础上我们加上调试参数：

   const msg = computed(() => firstName.value + 'computed', {
  onTrack(e) {
    console.log('读取值');
  },
  onTrigger(e) {
    console.log('更新值');
  },
});
console.info(msg.value);//触发onTrack
firstName.value = '更新一下';//触发onTrigger

• onTrack()在计算属性值被读取或引用时触发。
• onTrigger()在依赖值更新时触发。

类型

vue3跟ts密切相关，对于相关类型我们要有所了解，接下来看下官方定义的computed两个类型：

• 不可修改的。通过Readonly泛型定义只读的ref对象，这也是为什么用第一种方法定义计算属性修改值的时候会报错。debuggerOptions就是调试参数的定义。

  function computed<T>(
  getter: () => T,
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>;

• 可修改的。增加了get()与set()的定义，取消了Readonly泛型的限制。

  function computed<T>(
  options: {
    get: () => T;
    set: (value: T) => void;
  },
  debuggerOptions?: DebuggerOptions
): Ref<T>;

DebuggerOptions类型定义如下：

总结

以上就是vue的定义计算属性的两种方式，两种方式对应只读与可写，我们要根据自己需求采用正确的定义方式。