06计算属性

# 计算属性

# 反转

// src/App.vue
<template>
  <test>{{ reverseStr }}</test>
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const result = ref("hello world");
    const reverseStr = computed(() => {
      return result.value.split("").reverse().join("").toUpperCase();
    });
    console.log(reversStr.value);
    return {
      reverseStr,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 输入框形式

// src/App.vue
<template>
  <input type="text" v-model="reverseStr" />
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const result = ref("hello world");
    const reverseStr = computed({
      get: () => {
        return result.value.split("").reverse().join("").toUpperCase();
      },
      set: (newVal) => {
        console.log(newVal);
      },
    });
    return {
      reverseStr,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 调试 Computed

调试 Computed【意义上不大】 (opens new window)

// src/App.vue
<template>
  <input type="text" v-model="reverseStr" />
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const result = ref("hello world");
    const reverseStr = computed({
      get: () => {
        return result.value.split("").reverse().join("").toUpperCase();
      },
      set: (newVal) => {
        console.log(newVal);
      },
    });

      //调试用了
    onTrack(e) {
        // 当 count.value 作为依赖被追踪时触发
        //debugger
        console.log(e)
      },
    onTrigger(e) {
        // 当 count.value 被修改时触发
        //debugger
          console.log(e)
      }

    return {
      reverseStr,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

编辑

上次更新: 2023/08/06, 00:38:41

← 05订阅发布模式 07响应式计算和侦听→