vue3：6、组合式API-computed

<script setup>
import { computed, ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
const computedList = computed(() => {
  return list.value.filter((item) => item > 2)
})

const addFn = () => {
  list.value.push(666)
}

const count = ref(1)
const plusOne = computed({
  get: () => {
    return count.value + 1
  },
  set: (val) => {
    count.value = val
  }
})
const editPlusOne = () => {
  plusOne.value = 100
}
</script>
<template>
  <div>
    {
   
   { list }}
    <br />
    {
   
   { computedList }}
  </div>
  <div>
    <button @click="addFn">修改</button>
  </div>

  <div>
    <div>
      {
   
   { count }}
    </div>
    <div>
      {
   
   { plusOne }}
    </div>

    <button @click="editPlusOne">修改plusOne</button>
  </div>
</template>