vue3计算属性的写法computed

计算属性值会基于其响应式依赖被缓存

方法调用总是会在重渲染发生时再次执行函数 

<script setup>
import { ref, onMounted, computed } from 'vue'
import './index.css'

const count = ref({
  num: 0,
})

const handleCount = () => {
  count.value.num++
  console.log(count)
}

const double = computed(() => {
  return count.value.num * 2
})

onMounted(() => {
  console.log(1)
})
</script>

<template>
  <div class="m-home-wrap">
    <button @click="handleCount">{{ count.num }}</button>
    <div>{{ double }}</div>

    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>